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.