Liste non structurée : balises ul ol li, critère RGAA 9.3

C'est quoi

Le critère RGAA 9.3 exige que les listes de contenu soient balisées avec les éléments HTML appropriés.

Balises de liste disponibles :

<ul> + <li> : liste non ordonnée (éléments sans ordre significatif).
<ol> + <li> : liste ordonnée (étapes, classements).
<dl> + <dt> + <dd> : liste de définitions (termes et descriptions).

Erreurs fréquentes :

Tirets ou puces CSS dans un <p> ou un <div>.
Plusieurs éléments dans un seul <p> séparés par <br>.
Paragraphes commençant par un astérisque ou un tiret.

Les menus de navigation sont eux aussi des listes (<ul> + <li> + <a>). Les omettre viole aussi ce critère.

Qui est touché

Les personnes aveugles ou malvoyantes : les lecteurs d'écran annoncent "liste de X éléments" à l'entrée d'une <ul>, puis le numéro de chaque élément. Une fausse liste ne déclenche aucune de ces annonces.
Les utilisateurs qui naviguent par raccourcis clavier : sur NVDA, la touche L saute à la liste suivante. Sans <ul>, le raccourci est inopérant.

Impact business

Une liste de fonctionnalités produit, d'étapes d'installation ou de points clés balisée en paragraphes est lue linéairement, sans indication du nombre d'éléments ni possibilité de navigation rapide entre eux.

Cette erreur est particulièrement impactante dans les longues listes (fonctionnalités, résultats de recherche) où la navigation par liste est le moyen le plus efficace d'en balayer le contenu.

Sources des chiffres

Comment le détecter

Audit Mynto : le scan détecte les paragraphes commençant par des tirets ou des puces textuelles.
Manuel : active un lecteur d'écran et navigue la page. Entend-on "liste de X éléments" pour chaque groupe de puces visuelles ?
Inspecteur : cherche les blocs de contenu avec des tirets, étoiles ou numéros dans le texte qui ne sont pas dans des <ul>, <ol> ou <li>.

Comment corriger

Avant - HTML

<!-- Fausse liste avec tirets dans un paragraphe -->
<p>
  - Installation en 5 minutes<br>
  - Support 7j/7<br>
  - Mises à jour automatiques
</p>

Après - HTML

<!-- Liste sémantique correcte -->
<ul>
  <li>Installation en 5 minutes</li>
  <li>Support 7j/7</li>
  <li>Mises à jour automatiques</li>
</ul>

La correction consiste à remplacer le balisage de présentation par les balises de liste HTML. Le style visuel peut rester identique avec le CSS approprié (suppression des puces natives, espacement).

Si tu supprimes le style visuel de la liste (list-style: none), VoiceOver sur Safari peut ne plus annoncer l'élément comme une liste. Ajouter role="list" sur le <ul> corrige ce comportement spécifique.

Sur WordPress, l'éditeur Gutenberg génère automatiquement des <ul> pour les blocs Liste. Le problème vient souvent du contenu importé ou des constructeurs de page qui créent des "listes" dans des blocs texte.

Questions fréquentes

Une liste avec un seul élément doit-elle utiliser ul/li ?

Oui, si c'est sémantiquement une liste (susceptible d'être étendue, ou si la structure liste est utile au contexte). Pour un élément isolé permanent, un paragraphe peut suffire.

Faut-il utiliser ul ou ol ?

<ol> pour les listes ordonnées (étapes, classements) où l'ordre a un sens. <ul> pour les listes non ordonnées (fonctionnalités, avantages) où l'ordre n'est pas significatif.

Les menus de navigation doivent-ils être des listes ?

Oui. Un menu de navigation est une liste de liens. La structure canonique est <nav><ul><li><a href="...">...</a></li></ul></nav>. Les constructeurs de page WordPress respectent généralement cette structure.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Liste non structurée correctement