Rôle Structure du document

`listitem`

Marque un élément comme un item d'une liste. Utilisez <li> dans <ul> ou <ol> — l'élément natif porte le rôle et la position dans l'ensemble. Recourez à role="listitem" uniquement en association avec un role="list" explicite sur un parent non-liste.

Quand l’utiliser

Dans un <ul> ou un <ol>, utilisez simplement <li>. Le navigateur expose automatiquement le rôle, le comptage et la position dans l’ensemble.

Le seul cas pratique pour role="listitem" est lorsque vous avez appliqué role="list" à un élément non-liste (par exemple pour neutraliser l’heuristique list-style: none de Safari) et que les éléments à l’intérieur sont également des éléments non-liste. Chaque item doit alors avoir role="listitem" pour être comptabilisé.

Un listitem DOIT se trouver à l’intérieur d’un role="list". Un role="listitem" isolé sans parent liste est invalide et les lecteurs d’écran l’ignorent.

Erreurs courantes

role="listitem" sur un <div> dont le parent n’est pas un role="list". Le listitem n’a aucun contexte de groupe.
<li> en dehors d’un <ul> / <ol>. HTML invalide.
Définir aria-posinset et aria-setsize alors que la hiérarchie DOM reflète déjà la position. Redondant.
Confondre role="listitem" avec role="option" (utilisé dans role="listbox" pour les éléments sélectionnables).
Ajouter role="listitem" à des éléments <li> déjà à l’intérieur d’un <ul> — rôle dupliqué, sans effet.

Exemple

<!-- Préféré -->
<ul>
  <li>JAWS</li>
  <li>NVDA</li>
  <li>VoiceOver</li>
</ul>

<!-- Conteneur non-liste avec rôles explicites -->
<div role="list" aria-label="Recent updates">
  <div role="listitem">New /toolkit/standards/ landing page</div>
  <div role="listitem">WCAG 2.2 reference complete</div>
</div>