Accessibilità Web:
<article> vs <section>
Come scegliere?

Vai all'archivio: #MartedìAccessibile

Numero del post: Settimana 34

Data di pubblicazione: 15 Novembre 2022

Gli elementi HTML <article> vs <section> sono così simili

Sicuramente ti sarà capitato di confonderli e di non sapere come usarli. Sono gli elementi html <article> e <section>. Questa settimana stavo approfondendo l’argomento quando sono incappato in un articolo fighissimo: è un articolo Smashing Magazine di Olutimilehin Olushuyi. Ecco una sintesi per capire la differenza degli elementi HTML article e section.

Partiamo dalle definizioni di The HTML Living Standard

<article>: “complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable…” Immaginatelo come dei jeans: puoi scambiarli e metterli con vestiti diversi.

<section>: “generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading…” Questo invece potrebbe essere più simile all’armadio.

Possiamo distinguerli con un modello mentale:

1. L’elemento ha un ruolo per la struttura semantica?
No: usa un <div>
Sì: continua!
2. Che ruolo ha?
È parte di un insieme: usa un <section>
Può stare da solo: usa un <article>

Facciamo 2 esempi

  • Pagina web: possiamo suddividere il contenuto in <section> perché ogni sezione può avere un titolo e perché sono correlate tra di loro. Il blocco della newsletter non è indispensabile al fine di capire la struttura della pagina, quindi è un <div>;
  • Articolo blog: possiamo avere un contenitore <article> e inserire all’interno le sezioni collegate tra di loro.

Vantaggi e svantaggi

  • Vantaggio – organizzazione: durante la fase di Content Design è possibile definire le aree semantiche della pagina migliorando così l’architettura web;
  • Svantaggio – NON è accessibile: già, perché <article> e <section> non sono ben supportati dagli Screen Reader. Possiamo però usare gli ARIA Label.

Accessibilità per <section> e <article>

Si può usare il modo con aria-labelledby=”role” + id=”role” per far rendere riconoscibile la <section> dallo Screen Reader. Che benefici ha?

  • Le etichette label sono ricavate dal contenuto esistente, creando un’esperienza uguale tra gli utenti;
  • Chi usa lo Screen Reader può saltare direttamente alle sezioni mediante scorciatoia;
  • Però attenzione a non esagerare con l’uso di ARIA, altrimenti il rischio è di ottenere l’effetto contrario.