Qual è la differenza tra semantica e accessibilità…

La semantica aiuta le macchine (browser, parser, robot di ricerca) a comprendere la struttura e il significato del contenuto. L'accessibilità (a11y) mira a rendere i contenuti comprensibili e utilizzabili da persone con diverse limitazioni fisiche o cognitive che utilizzano tecnologie assistive.

Tag semantici

L'uso di tag HTML semantici, come <article>, <nav>, <aside>, <footer>, <h1>-<h6>, conferisce un significato agli elementi della pagina. Ad esempio:

<article>
  <h2>Titolo dell'articolo</h2>
  <p>Testo dell'articolo...</p>
</article>

Questo aiuta i browser a interpretare correttamente la struttura del documento.

Accessibilità (a11y)

L'accessibilità copre molti aspetti:

Semantica: L'uso corretto di tag semantici è già parte dell'accessibilità, poiché aiuta le tecnologie assistive (schermate di lettura) a capire la struttura e la funzione degli elementi.
Attributi ARIA: Attributi aggiuntivi come aria-label, aria-describedby, aria-hidden, role, forniscono informazioni supplementari alle tecnologie assistive quando la semantica HTML non è sufficiente.
```
<button aria-label="Chiudi finestra di dialogo">
  <img src="close.svg" alt="">
</button>
```
Contrasto: Contrasto sufficiente tra testo e sfondo per le persone con disabilità visive.
Navigazione tramite tastiera: Possibilità di navigare nella pagina e interagire con gli elementi usando solo la tastiera.
Testo alternativo per le immagini (alt): Descrizione del contenuto dell'immagine per gli utenti che non la vedono.
```
<img src="cat.jpg" alt="Gatto nero che dorme sul davanzale della finestra.">
```
Struttura degli intestazioni: Gerarchia logica delle intestazioni (<h1> - <h6>) per una navigazione facilitata con gli screen reader.

Relazione

La semantica è una base importante per l'accessibilità. Una pagina ben strutturata con elementi semantici è molto più facile da rendere accessibile. Tuttavia, la semantica da sola non è sufficiente per un'accessibilità completa; spesso sono necessarie misure aggiuntive come attributi ARIA, gestione del focus e garanzia di un contrasto sufficiente.

Qual è la differenza tra semantica e accessibilità (a11y)?