Ruolo Struttura del documento

`article`

Contrassegna una composizione autonoma che potrebbe stare da sola — un post di blog, una notizia, una risposta in un forum o una scheda prodotto. Si consiglia di usare prima l'elemento nativo <article>; si ricorre a role="article" solo quando non è possibile utilizzare l'elemento HTML.

Quando usarlo

Si utilizzi <article>. L’elemento nativo porta il ruolo automaticamente e si integra con l’algoritmo di struttura del documento.

role="article" su un <div> è appropriato quando non è possibile utilizzare l’elemento nativo — di solito per un vincolo del sistema di template. Ogni articolo dovrebbe contenere il proprio heading affinché gli utenti di screen reader possano identificarlo.

Per un feed di articoli (una timeline, un indice di blog), è opportuno racchiuderli in role="feed" e impostare aria-posinset / aria-setsize su ciascun articolo. In caso contrario, si omettano entrambi gli attributi.

Errori comuni

Usare <article> per ogni blocco di contenuto. L’elemento implica «autonomo». Un testo in una barra laterale è raramente un articolo.
role="article" su un <section> che fa parte di un documento più ampio, non una composizione autonoma. Si utilizzi invece role="region" o semplicemente <section>.
Articolo senza heading. Gli utenti di screen reader che navigano per articolo non hanno un nome con cui identificarlo.
Annidamento di <article> all’interno di <article> per un thread di commenti senza usare aria-labelledby per assegnare a ciascun articolo interno un nome accessibile distinto.

Esempio

<article aria-labelledby="post-title-42">
  <h2 id="post-title-42">Perché un solo landmark main per pagina</h2>
  <p>Il landmark <code>&lt;main&gt;</code> identifica…</p>
</article>