Accessibilità Web:
Raccontare una storia
Con la semantica HTML

Vai all'archivio: #MartedìAccessibile

Numero del post: Settimana 3

Data di pubblicazione: 12 Aprile 2022

HTML semantico: perché è così importante?

Alcuni elementi HTML sono detti semantici perché:

  • Hanno proprietà intrinseche automatiche (come il :focus per <a> e <button>);
  • Sono quindi più facili da sviluppare: evitano di aggiungere funzioni già presenti;
  • Comunicano con i motore di ricerca, quindi hanno valenza SEO;
  • Sono utili per navigare con sola tastiera, per <a> e <button>;
  • Inoltre comunicano con gli Screen Reader, facilitando la navigazione.
  • Maggiori informazioni nel primo commento.

1. Div + Span

Sono elementi non semantici dell’HTML. Dovrebbero servire solo come mattoni. Spesso sono usati per la struttura portante del layout.

2. Semantic tags

Sono elementi utili per strutturare il layout e le parti attivabili, ad esempio:

  • nav: gruppi di link utili per la navigazione (rilevati anche con Screen Reader);
  • header: intestazione della pagina e di altre sezioni article;
  • footer: chiusura della pagina e di altre sezioni article;
  • aside: parte accessoria della pagina e di altre sezioni;
  • H1 – H6: titoli rilevabili dagli Screen Reader;
  • figure + figcaption: per avere la didascalia associata alla foto.