Rôle Structure du document

`list`

Marque un élément comme liste d'items. Préférez <ul>, <ol> ou <dl> — l'élément natif gère le rôle, le comptage et le marqueur visuel. Recourez à role="list" uniquement si CSS list-style: none déclenche la suppression du rôle liste par Safari.

Quand l’utiliser

Utilisez <ul> pour les listes non ordonnées, <ol> pour les listes ordonnées, <dl> pour les listes de définitions. Chacun est exposé comme une liste avec un comptage correct des éléments, gratuitement.

La seule raison pratique de définir explicitement role="list" sur un <ul> est le comportement de « suppression du rôle liste » de Safari : lorsqu’un <ul> a list-style: none appliqué, WebKit retire le rôle liste de l’arbre d’accessibilité en supposant qu’il s’agit d’une liste purement stylistique. Définir explicitement role="list" neutralise cette heuristique.

Ne confondez PAS role="list" avec role="listbox". Une liste est du contenu statique ; une listbox est un composant de sélection interactif. Les mélanger conduit les lecteurs d’écran à attendre une sémantique de sélection qui n’existe pas.

Erreurs courantes

role="list" sur des conteneurs <div> qui contiennent des « éléments » <div> sans role="listitem". Le rôle list exige que les enfants listitem soient exposés ; sans eux, le comptage est incorrect.
Utiliser role="list" pour un menu de navigation au lieu d’un <nav> avec <ul>. Le point de repère de navigation est plus utile.
Ajouter role="list" à un <ul> qui n’a pas list-style: none. Redondant ; le rôle natif est déjà présent.
Utiliser role="list" quand role="listbox" était ce qui était voulu.
Imbriquer des éléments <li> dans un parent non-liste (un <div>) — les listitems deviennent orphelins.

Exemple

<!-- Préféré -->
<ul>
  <li>Screen reader</li>
  <li>Switch control</li>
  <li>Voice control</li>
</ul>

<!-- Neutraliser la suppression du rôle liste de Safari -->
<ul role="list" style="list-style: none;">
  <li role="listitem">Screen reader</li>
  <li role="listitem">Switch control</li>
</ul>