Dans chaque page web, chaque liste est-elle correctement structurée ?
Un lecteur d’écran comme NVDA annonce « liste de 4 éléments » lorsqu’il rencontre un <ul>. Sans balise sémantique, l’utilisateur reçoit une suite de textes sans indication qu’ils sont liés entre eux. La structure disparaît, la navigation aussi.
Le RGAA distingue trois types de listes. Les listes non ordonnées utilisent <ul> et <li> — ou role="list" avec role="listitem" sur les éléments enfants. Les listes ordonnées utilisent <ol> et <li>, avec la même alternative ARIA possible. Les listes de description, elles, doivent obligatoirement utiliser <dl>, <dt> et <dd> : aucun équivalent ARIA n’est accepté pour ce type.
En pratique, repérez tout ce qui ressemble visuellement à une liste — puces, numéros, grilles de fonctionnalités, glossaires, menus de navigation — et vérifiez que le code reflète cette structure. CSS ne compte pas : ajouter list-style sur des <div> crée l’apparence d’une liste, jamais sa sémantique.
Ce que vous voyez comme une liste doit l’être aussi dans le code.
3 tests pour vérifier le balisage correct des listes
Liste non ordonnée <ul>
- Repérez dans la page tous les blocs d’éléments présentés visuellement comme une liste non ordonnée (avec puces, icônes ou simple alignement vertical groupé).
- Pour chaque liste identifiée, vérifiez que la structure utilise l’une de ces deux approches :
<ul>contenant des<li>,- un élément parent avec
role="list"dont tous les enfants directs portentrole="listitem".
- Si chaque liste non ordonnée respecte l’une de ces deux structures, le test est validé. Un seul écart suffit à l’invalider.
Liste ordonnée <ol>
- Repérez dans la page tous les blocs d’éléments présentés visuellement comme une liste ordonnée (numérotée, ou dont l’ordre a une signification : étapes d’un processus, classement, procédure).
- Pour chaque liste identifiée, vérifiez que la structure utilise l’une de ces deux approches :
<ol>contenant des<li>,- un élément parent avec
role="list"dont tous les enfants directs portentrole="listitem".
- Si chaque liste ordonnée respecte l’une de ces deux structures, le test est validé.
Liste de description <dl>
- Repérez dans la page tous les blocs présentés comme une liste de description : glossaires, paires terme/définition, données de contact (nom/valeur), FAQ structurées.
- Pour chaque liste identifiée, vérifiez que la structure utilise obligatoirement
<dl>comme conteneur,<dt>pour chaque terme et<dd>pour chaque description associée. - Contrairement aux listes ordonnées et non ordonnées, aucune alternative ARIA n’est acceptée pour ce type. Si chaque liste de description utilise
<dl>/<dt>/<dd>, le test est validé.
Exemples
❌ Non conforme : Liste visuelle implémentée avec des <div>
<div class="features">
<div class="feature-item">Compatibilité mobile</div>
<div class="feature-item">Mises à jour automatiques</div>
<div class="feature-item">Support 24h/24</div>
</div>Visuellement, ces trois éléments forment une liste. Mais un lecteur d’écran lit trois blocs de texte indépendants : aucune annonce « liste de 3 éléments », aucune possibilité de naviguer de puce en puce avec les raccourcis dédiés. La structure sémantique est absente.
✅ Conforme : Même contenu structuré avec <ul> et <li>
<ul class="features">
<li>Compatibilité mobile</li>
<li>Mises à jour automatiques</li>
<li>Support 24h/24</li>
</ul>NVDA annonce « liste de 3 éléments » à l’entrée, puis « puce 1 », « puce 2 », etc. L’utilisateur sait qu’il navigue dans un groupe d’éléments apparentés et peut sauter d’une liste à l’autre.
❌ Non conforme : Liste de description avec une structure incorrecte
<dl>
<li>NVDA</li>
<li>Lecteur d’écran Windows, gratuit</li>
<li>VoiceOver</li>
<li>Lecteur d’écran intégré à macOS et iOS</li>
</dl><li> n’est pas un enfant valide de <dl>. Le balisage est incorrect HTML et la relation terme/description est perdue. Un lecteur d’écran ne peut pas annoncer que NVDA et sa définition sont liés.
✅ Conforme : Liste de description correctement structurée avec <dl>, <dt> et <dd>
<dl>
<dt>NVDA</dt>
<dd>Lecteur d’écran Windows, open source et gratuit</dd>
<dt>VoiceOver</dt>
<dd>Lecteur d’écran intégré à macOS et iOS</dd>
</dl>NVDA annonce chaque terme (<dt>) suivi de sa description (<dd>). L’utilisateur comprend immédiatement la relation entre le nom du logiciel et sa définition. La navigation entre définitions est possible avec les raccourcis lecteur d’écran.
Astuces et pièges
⚠️ list-style: none peut faire perdre la sémantique sous Safari
Quand vous réinitialisez les puces avec list-style: none, Safari avec VoiceOver peut ne plus restituer l’élément comme une liste. C’est un comportement connu : Apple considère qu’un <ul> sans puces n’est pas présenté comme une liste. Pour éviter ce problème, ajoutez role="list" explicitement sur l’élément <ul> ou <ol> concerné.
⚠️ role="list" sans role="listitem" sur les enfants
Utiliser role="list" sur le conteneur mais oublier role="listitem" sur les éléments enfants rend le test 9.3.1 ou 9.3.2 non conforme. Les deux attributs sont indissociables : la structure ARIA doit être complète pour être valide.
⚠️ Pas d’équivalent ARIA pour <dl>
Contrairement aux listes ordonnées et non ordonnées, les listes de description n’ont aucune alternative ARIA acceptée par le RGAA 9.3.3. Si vous implémentez une liste de description avec des <div> et des rôles, le test échoue systématiquement. Utilisez <dl>, <dt> et <dd>, point.
💡 Une liste à un seul élément reste conforme
Le RGAA ne fixe pas de nombre minimum d’éléments. Un <ul> avec un seul <li> est valide. Si votre contenu est par nature une énumération qui peut parfois se réduire à un item (résultats de recherche, tags, catégories), gardez la structure liste sans condition sur le nombre d’éléments.
⚠️ Les menus de navigation sont des listes
Un menu de navigation est une liste de liens. Le RGAA 9.3 s’y applique : le <nav> doit contenir un <ul> avec des <li>. C’est une erreur fréquente sur les menus horizontaux construits avec des <div> et des <a> directs, où l’aspect visuel de menu masque l’absence de structure sémantique.
Questions fréquentes
Pourquoi une liste à un seul élément peut-elle poser problème selon le RGAA ?
Oui. Le critère 9.3 ne spécifie aucun nombre minimum d’éléments. Une liste à un seul <li> est sémantiquement valide. Si le contenu représente par nature une énumération (même circonstanciellement réduite), gardez la structure liste. L’annonce « liste de 1 élément » peut paraître redondante, mais elle est correcte.
Comment auditer le critère RGAA 9.3 sur les listes d'une page web ?
Dans les DevTools du navigateur, cherchez visuellement les zones qui ressemblent à des listes (grilles de fonctionnalités, menus, glossaires, étapes, résultats) et inspectez le HTML. La présence de <div> ou <span> là où vous attendez <ul>, <ol> ou <dl> est un signal d’alerte immédiat. Vous pouvez aussi utiliser un bookmarklet d’accessibilité ou l’inspecteur d’accessibilité de Firefox pour visualiser l’arbre sémantique.
Quelle différence entre role="list" et les balises <ul> ou <ol> pour le RGAA ?
Oui, pour les listes non ordonnées (test 9.3.1) et ordonnées (test 9.3.2) : role="list" sur le conteneur avec role="listitem" sur chaque enfant est une alternative valide. En revanche, pour les listes de description (test 9.3.3), aucune alternative ARIA n’est acceptée. Seuls <dl>, <dt> et <dd> permettent de valider ce test.
Pourquoi masquer les puces avec CSS (list-style: none) peut-il poser un problème RGAA ?
Non sur le plan du critère 9.3 : le RGAA évalue la structure HTML, pas l’apparence visuelle. Supprimer les puces en CSS reste conforme. Mais sous Safari avec VoiceOver, ce style peut faire perdre la sémantique de liste. Ajoutez role="list" sur l’élément <ul> pour garantir la restitution correcte sur tous les lecteurs d’écran.
Comment le critère RGAA 9.3 s'applique-t-il aux listes de liens dans un <nav> ?
Oui. Un menu de navigation est une liste de liens, et le critère 9.3 s’y applique. La bonne structure est <nav> contenant un <ul> avec des <li> et des <a>. Construire un menu avec des <div> et des <a> directs, sans <ul> ni <li>, constitue une non-conformité au test 9.3.1.