ARIA : rôle listitem
Le rôle listitem
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ôle list
, qui est utilisé pour identifier un conteneur de liste.
<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 conteneurs list
et listitem
.
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>
. Voir Meilleures 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ôle
list
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'utilisez role="list"
et role="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 :
<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 :
<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 ARIA list
/ listitem
ne font pas de distinction entre les listes ordonnées et non ordonnées.
Note :
Le style d'une liste avec list-style: none;
en CSS supprime la sémantique de liste. L'ajout de role="listitem"
renvoie la sémantique.
Spécifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA)> # listitem> |
Voir aussi
- L'élément HTML
<li>
- L'élément HTML
<ul>
- L'élément HTML
<ol>
- ARIA : rôle
list
- ARIA : rôle
group
- Le Modèle d'Objet d'Accessibilité (angl.)
- ARIA dans HTML (angl.)
- Exemples de listes ARIA (angl.) — par Scott O'Hara