Roll Dokumentstruktur

`article`

Markerar en fristående komposition som kan stå på egen hand — ett blogginlägg, en nyhetsartikel, ett forumssvar eller ett produktkort. Använd det inbyggda <article>-elementet i första hand; använd role="article" bara när HTML-elementet inte kan användas.

När du ska använda det

Använd <article>. Det inbyggda elementet bär rollen automatiskt och integreras med dokumentets dispositionsalgoritm.

role="article" på en <div> är lämpligt när du inte kan använda det inbyggda elementet — vanligen en begränsning i ett mallsystem. Varje artikel bör innehålla sin egen rubrik så att skärmläsaranvändare kan identifiera den.

För ett flöde av artiklar (en tidslinje, ett bloggindex), omslut dem med role="feed" och sätt aria-posinset / aria-setsize på varje artikel. Annars, lämna båda attributen borta.

Vanliga fel

Använder <article> för varje innehållsblock. Elementet antyder “kan stå på sin egen”. En kort text i en sidopanel är sällan en artikel.
role="article" på en <section> som är en del av ett större dokument, inte en fristående komposition. Använd role="region" eller bara <section> i stället.
Artikel utan rubrik. Skärmläsaranvändare som navigerar via artiklar har inget namn på den.
Kapslar <article> inuti <article> för en kommentarstråd utan att använda aria-labelledby för att ge varje inre artikel ett distinkt tillgängligt namn.

Exempel

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