Rol Documentstructuur

`article`

Markeert een op zichzelf staande compositie die onafhankelijk zou kunnen bestaan — een blogpost, nieuwsbericht, forumreactie of productkaart. Gebruik het native <article>-element eerst; kies role="article" alleen als het HTML-element niet kan worden gebruikt.

Wanneer gebruiken

Gebruik <article>. Het native element draagt de rol automatisch en integreert met het document-outline-algoritme.

role="article" op een <div> is passend wanneer het native element niet kan worden gebruikt — doorgaans een beperk van een sjabloonsysteem. Elk artikel moet zijn eigen koptekst bevatten zodat schermlezers het kunnen identificeren.

Voor een stroom artikelen (een tijdlijn, een blogindex) worden ze omhuld in role="feed" en stelt men aria-posinset / aria-setsize in op elk artikel. Anders worden beide attributen weggelaten.

Veelvoorkomende fouten

<article> gebruiken voor elk inhoudsblok. Het element impliceert “staat op zichzelf”. Een tekstblok in een zijbalk is zelden een artikel.
role="article" op een <section> die deel uitmaakt van een groter document, geen op zichzelf staande compositie. Gebruik in plaats daarvan role="region" of gewoon <section>.
Artikel zonder koptekst. Schermlezers die per artikel navigeren hebben dan geen naam voor het artikel.
<article> nesten binnen <article> voor een commentaarreeks zonder aria-labelledby te gebruiken om elk binnenste artikel een onderscheidende toegankelijke naam te geven.

Voorbeeld

<article aria-labelledby="post-title-42">
  <h2 id="post-title-42">Why one main landmark per page</h2>
  <p>The <code>&lt;main&gt;</code> landmark identifies…</p>
</article>