ARIA : rôle listitem

Le rôlelistitem peut être utilisé pour identifier un élément à l'intérieur d'une liste d'éléments. Il est normalement utilisé en conjonction avec le rôlelist, qui est utilisé pour identifier un conteneur de liste.

html

<section role="list">  <div role="listitem">Élément de liste 1</div>  <div role="listitem">Élément de liste 2</div>  <div role="listitem">Élément de liste 3</div></section>

Description

Tout contenu qui consiste en un conteneur externe avec une liste d'éléments à l'intérieur peut être identifié par les technologies d'assistance en utilisant respectivement les conteneurslist etlistitem.

Il n'y a pas de règles strictes concernant les éléments que vous devez utiliser pour marquer la liste et les éléments de liste, mais vous devez vous assurer que les éléments de liste ont du sens dans le contexte d'une liste, par exemple, une liste de courses, des étapes de recette, des instructions de conduite.

Note :Si possible dans votre travail, vous devez utiliser les éléments HTML sémantiques appropriés pour marquer une liste et ses éléments de liste —<ul>/<ol> et<li>. VoirMeilleures pratiques pour un exemple complet.

Propriétés, états et rôles WAI-ARIA associés

list: Une liste d'éléments. Les éléments avec le rôlelist doivent avoir un ou plusieurs éléments avec le rôlelistitem comme enfants, un ou plusieurs éléments avec le rôle degroup qui ont un ou plusieurs éléments avec le rôlelistitem comme enfants.
group: Une collection d'objets connexes, limitée aux éléments de liste lorsqu'ils sont imbriqués dans une liste, pas assez importants pour avoir leur propre place dans la table des matières d'une page.

Bonnes pratiques

N'utilisezrole="list" etrole="listitem" que si vous devez le faire — par exemple, si vous n'avez pas le contrôle sur votre HTML mais que vous êtes en mesure d'améliorer l'accessibilité de manière dynamique après coup avec JavaScript.

Si possible, vous devez utiliser les éléments HTML sémantiques appropriés pour marquer une liste et ses éléments de liste —<ol>,<ul> et<li>. Par exemple, notre exemple ci-dessus devrait être réécrit comme suit :

html

<ul>  <li>Élément de liste 1</li>  <li>Élément de liste 2</li>  <li>Élément de liste 3</li></ul>

ou utilisez une liste ordonnée si l'ordre des éléments de la liste est important :

html

<ol>  <li>Élément de liste 1</li>  <li>Élément de liste 2</li>  <li>Élément de liste 3</li></ol>

Note :Les rôles ARIAlist /listitem ne font pas de distinction entre les listes ordonnées et non ordonnées.

Note :Le style d'une liste aveclist-style: none; en CSS supprime la sémantique de liste. L'ajout derole="listitem" renvoie la sémantique.

Note :Si vous marquez une liste d'éléments qui fonctionneront comme une interface à onglets, vous devez plutôt utiliser les rôlestab,tabpanel ettablist.