Rolle Dokumentstruktur

`article`

Kennzeichnet eine in sich geschlossene Komposition, die für sich allein stehen kann — ein Blogbeitrag, eine Nachrichtenmeldung, ein Forenbeitrag oder eine Produktkarte. Das native <article>-Element sollte bevorzugt werden; role="article" kommt nur zum Einsatz, wenn das HTML-Element nicht verwendet werden kann.

Wann zu verwenden

<article> sollte verwendet werden. Das native Element trägt die Rolle automatisch und integriert sich in den Gliederungsalgorithmus des Dokuments.

role="article" auf einem <div> ist angemessen, wenn das native Element nicht verwendet werden kann — in der Regel eine Einschränkung durch das Templating-System. Jeder Artikel sollte eine eigene Überschrift enthalten, damit Screenreader-Nutzerinnen und -Nutzer ihn identifizieren können.

Bei einem Artikel-Feed (einer Zeitleiste oder einem Blog-Index) werden die Artikel in role="feed" eingeschlossen, und aria-posinset / aria-setsize werden auf jedem einzelnen Artikel gesetzt. Andernfalls werden beide Attribute weggelassen.

Häufige Fehler

<article> für jeden Inhaltsblock zu verwenden. Das Element impliziert „steht für sich allein“. Ein Teasertext in einer Seitenleiste ist selten ein Artikel.
role="article" auf einem <section>, das Teil eines größeren Dokuments und keine eigenständige Komposition ist. Stattdessen sollte role="region" oder einfach <section> verwendet werden.
Artikel ohne Überschrift. Screenreader-Nutzerinnen und -Nutzer, die nach Artikeln navigieren, haben keinen Namen für den betreffenden Artikel.
Verschachtelung von <article> innerhalb von <article> in einem Kommentar-Thread, ohne aria-labelledby zu verwenden, um jedem inneren Artikel einen eindeutigen zugänglichen Namen zu geben.

Beispiel

<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>