RGAA Lab

RGAA 4.1.2 · Structuration de l’information · Critère 9.3

Dans chaque page web, chaque liste est-elle correctement structurée ?

Un lecteur d'écran annonce « liste de cinq éléments » et permet d'en sortir d'un geste : une fausse liste faite de tirets et de sauts de ligne ne donne ni le compte, ni la sortie.

Ce que dit le référentiel

Transcription du RGAA 4.1.2, sans interprétation. C’est ce texte qui fait foi, et celui que vous citez dans un rapport.

  1. 9.3.1
    Dans chaque page web, les informations regroupées visuellement sous forme de liste non ordonnée vérifient-elles une de ces conditions ?
    • La liste utilise les balises HTML <ul> et <li> ;
    • La liste utilise les attributs WAI-ARIA role="list" et role="listitem".
  2. 9.3.2
    Dans chaque page web, les informations regroupées visuellement sous forme de liste ordonnée vérifient-elles une de ces conditions ?
    • La liste utilise les balises HTML <ol> et <li> ;
    • La liste utilise les attributs WAI-ARIA role="list" et role="listitem".
  3. 9.3.3
    Dans chaque page web, les informations regroupées sous forme de liste de description utilisent-elles les balises <dl> et <dt>/<dd> ?

Comment le vérifier

  1. Repérer à l'écran les groupements en liste : puces, numéros, énumérations alignées, menus, galeries, fils d'actualité.
  2. Vérifier qu'ils utilisent ul/ol et li — ou, à défaut, role="list" et role="listitem".
  3. Vérifier que les couples terme + définition emploient dl, dt et dd.
  4. Vérifier qu'aucun élément étranger ne s'intercale entre la liste et ses éléments : la relation se perd.

Ce que notre outil fait

Assisté

Le moteur repère les éléments concernés et vous pose la question. Il ne conclut pas à votre place.

Aucune règle du moteur ne conclut ici. L'imbrication fautive — un li hors de sa liste — est relevée au titre de la validité du code, au 8.2. L'essentiel de ce critère est ailleurs : reconnaître qu'un groupement visuel est une liste ne se lit pas dans le balisage, justement parce que le balisage manque. L'outil vous montre les listes existantes, et signale les groupements qui en ont les signes sans en avoir les balises : puce dessinée par la feuille de style hors d'un li, puces ou numéros écrits dans le texte, suite de liens séparés par des barres verticales, rôle de liste posé à moitié, liste sans puces ni role="list". Il ne conclut sur aucun — c'est l'écran qui tranche —, il dit où regarder.

Comment nous mesurons ce que l'outil sait faire · ce critère s'audite dans l'extension RGAA Lab.

Les pièges

Les erreurs qu’on rencontre vraiment, relevées au fil des audits.

  • Une série de liens séparés par des barres verticales est une liste. C'est le cas le plus courant, en pied de page.
  • list-style: none fait perdre le rôle de liste dans certaines versions de Safari + VoiceOver : ajouter role="list" sur un ul sans puces est une précaution répandue, et sans effet néfaste ailleurs.
  • Une liste de définitions employée pour aligner deux colonnes de texte quelconque est un détournement de balise (8.9).

À lire avec