Rôle Structure du document

`article`

Marque une composition autonome pouvant se suffire à elle-même — un billet de blog, un article d'actualité, une réponse de forum ou une fiche produit. Utilisez l'élément natif <article> en priorité ; recourez à role="article" uniquement si vous ne pouvez pas utiliser l'élément HTML.

Quand l’utiliser

Utilisez <article>. L’élément natif porte le rôle gratuitement et s’intègre à l’algorithme de structure du document.

role="article" sur un <div> est approprié uniquement si vous ne pouvez pas utiliser l’élément natif — généralement en raison d’une contrainte de template. Chaque article doit contenir son propre titre afin que les utilisateurs de lecteurs d’écran puissent l’identifier.

Pour un flux d’articles (une chronologie, un index de blog), encapsulez-les dans role="feed" et définissez aria-posinset / aria-setsize sur chaque article. Dans le cas contraire, omettez ces deux attributs.

Erreurs courantes

Utiliser <article> pour chaque bloc de contenu. L’élément implique « se suffit à lui-même ». Un résumé dans une barre latérale est rarement un article.
role="article" sur un <section> qui fait partie d’un document plus large et non d’une composition autonome. Utilisez plutôt role="region" ou simplement <section>.
Article sans titre. Les utilisateurs de lecteurs d’écran naviguant par article n’ont aucun nom pour l’identifier.
Imbriquer <article> dans <article> pour un fil de commentaires sans utiliser aria-labelledby pour donner à chaque article interne un nom accessible distinct.

Exemple

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