Les listes

Essayez-les

Inspecter le balisage de chaque bloc

Les trois blocs se ressemblent à l’écran. Le bouton lit leur balisage réel : c’est la seule différence qui compte, et la seule qu’on ne voit pas.

Cette démo existe aussi en page autonome.

Ce qu’une liste apporte

Un lecteur d’écran annonce une liste avec son nombre d’éléments, puis la position de chacun : « liste de 3 éléments, 1 sur 3… ». Trois informations qu’une suite de paragraphes ne donne jamais.

Ce n’est pas décoratif. Savoir qu’il reste deux éléments décide si on continue ou si on saute ; et la plupart des lecteurs offrent un raccourci pour aller à la liste suivante, ou pour en sortir d’un coup. Une fausse liste n’apparaît dans aucun de ces déplacements.

L’erreur courante

Les tirets et les sauts de ligne.

<!-- À ne pas faire : une liste pour l'œil seulement -->
<p>
	– Relever les images sans alternative<br />
	– Vérifier les intitulés de liens<br />
	– Contrôler les en-têtes de tableau
</p>

Trois variantes de la même faute : les tirets dans un paragraphe, une suite de <div> alignés, et — plus subtil — la liste dont les <li> ne sont pas enfants directs de leur <ul>.

<!-- À ne pas faire : le div rompt la liste -->
<ul>
	<div class="rangee">
		<li>Premier</li>
		<li>Deuxième</li>
	</div>
</ul>

Ce dernier cas est celui que les frameworks produisent le plus souvent, en enveloppant chaque élément d’un conteneur de mise en page. Le balisage reste valide à l’œil, mais la relation liste-élément est rompue : le décompte devient faux, quand il ne disparaît pas.

Le code, pas à pas

1. La bonne liste pour la bonne chose

<!-- Un ordre qui ne compte pas -->
<ul>
	<li>Relever les images sans alternative</li>
	<li>Vérifier les intitulés de liens</li>
</ul>

<!-- Un ordre qui compte : des étapes, un classement -->
<ol>
	<li>Constituer l'échantillon</li>
	<li>Passer les critères</li>
	<li>Rédiger la déclaration</li>
</ol>

<!-- Des paires terme / définition -->
<dl>
	<dt>Non applicable</dt>
	<dd>Le critère ne rencontre aucun contenu concerné ; il sort du calcul.</dd>
</dl>

Le choix se pose une seule question : l’ordre porte-t-il du sens ? S’il en porte, <ol> — le lecteur annonce alors « 2 sur 5 », qui devient une information. Sinon, <ul>.

<dl> est fait pour les paires, et c’est ce qui en fait le bon balisage d’un glossaire, d’une fiche de caractéristiques ou de métadonnées. Un <dt> peut porter plusieurs <dd>, et inversement.

2. Rien entre la liste et ses éléments

<ul>
	<li class="rangee">Premier</li>
	<li class="rangee">Deuxième</li>
</ul>

Les seuls enfants directs d’un <ul> ou <ol> sont des <li>. Si la mise en page réclame un conteneur, il va dans le <li>, jamais autour. Pour un <dl>, un <div> enveloppant une paire <dt>/<dd> est en revanche permis — c’est la seule exception.

3. Le piège des puces retirées

C’est le point qui nous a coûté le plus cher, et il n’est écrit nulle part dans la documentation des frameworks.

/* Ce que font tous les resets CSS, Tailwind compris */
ul {
	list-style: none;
}

Sur Safari avec VoiceOver, une liste dont les puces sont retirées peut perdre son rôle de liste : ni le nombre d’éléments, ni l’appartenance ne sont plus restitués. Le balisage est correct, le rendu est correct, et l’information disparaît quand même.

La parade tient en un attribut :

<ul role="list" class="sans-puces">
	<li>…</li>
</ul>

Redéclarer le rôle qu’un <ul> possède déjà semble absurde — et c’est précisément ce qui le rétablit dans ce cas. La précaution est répandue, sans effet néfaste ailleurs, et n’a pas de coût.

Ce n’est pas une non-conformité au RGAA : un <ul> sans puces reste correctement balisé au sens du critère 9.3. C’est une précaution de robustesse — et nous la vérifions à la construction du site, parce qu’un oubli est invisible à la relecture. Ce guide en a d’ailleurs fait les frais : la démo ci-dessus a d’abord été refusée par notre propre contrôle.

4. La liste de mise en page

L’excès inverse existe : envelopper en <ul> tout ce qui se répète. Une grille de cartes purement visuelle annonce alors « liste de 12 éléments » sans qu’il y ait rien à énumérer.

La question à se poser : l’utilisateur gagne-t-il à savoir combien il y en a ? Pour une barre de navigation, oui — c’est une vraie liste de liens, et c’est l’usage recommandé. Pour trois blocs décoratifs alignés, non.

Au clavier

Une liste n’est pas interactive : elle n’entre pas dans l’ordre de tabulation, et seuls les liens ou boutons qu’elle contient le font. Sa navigation appartient au lecteur d’écran.

Touche	Effet
L	Va à la liste suivante (mode navigation rapide, NVDA et JAWS).
I	Passe d’un élément de liste au suivant.
Tab	Ne s’arrête que sur les liens et boutons contenus dans la liste.

Ce que le lecteur d’écran restitue

À l’entrée : la nature et le compte — « liste de 3 éléments » — puis chaque élément avec son rang. Pour une <dl> : « liste de définitions », puis les termes et leurs définitions par paires.

Si vous n’entendez pas le nombre d’éléments, deux causes : ce n’est pas une liste, ou c’en est une dont les puces ont été retirées sur Safari. Le premier cas se corrige au balisage, le second par role="list".

Checklist

• Toute énumération est une liste : <ul>, <ol> si l’ordre compte, <dl> pour des paires.
• Rien entre la liste et ses <li> — le conteneur de mise en page va dedans.
• role="list" dès que les puces sont retirées.
• Pas de liste pour de la mise en page : demandez-vous si le compte informe.
• Une hiérarchie de contenu demande des titres, pas des puces imbriquées.

Les critères RGAA en jeu

• Critère 9.3 — Structure des listes

  Toute énumération doit être balisée en liste — ul, ol ou dl selon sa nature — et cette liste doit être correctement structurée : que des li en enfants directs, et rien d'autre entre eux.

• Critère 8.9 — Balises utilisées pour la présentation

  L'inverse du précédent : une liste employée pour la seule mise en page annonce une énumération qui n'existe pas. Une barre de navigation est une vraie liste de liens ; une grille de cartes décorative n'en est pas une.

• Critère 9.1 — Structure par les titres

  Une liste n'est pas un plan : des éléments qui structurent le document demandent des titres, pas des puces imbriquées sur cinq niveaux.

Vérifiez votre composant avec l'extension

Pour aller plus loin

• Critère 9.3 — Structure des listes : les tests exacts, et le piège Safari détaillé.
• Les tableaux de données : l’autre balisage où la structure porte l’information.
• Le glossaire du référentiel : « liste de définitions », « structure du document » tels que le RGAA les entend.

Sources

• MDN — <ul> — la référence de l’élément
• WCAG — Understanding 1.3.1 Info and Relationships — pourquoi une énumération doit être balisée
• Scott O’Hara — Fixing Lists — l’enquête d’origine sur la perte de rôle avec Safari et VoiceOver
• W3C WAI — Page Structure Tutorial — la place des listes dans la structure d’une page