Share

Approfondir

Qualité Web le livre

Livre Qualité Web

Acheter

228 - Elements that are visually displayed as lists are tagged in an appropriate way in the source code.

Objectif
  • Enable browsers and technical aids to identify lists and then reproduce them accurately, in order to facilitate their understanding by users.
  • Improve the semantics of page content and its reusability.
  • Improve the accessibility of content for people with disabilities.
Mise en œuvre

Soit utiliser les éléments HTML appropriés :

  • ul, li pour les listes non ordonnées ;
  • ol, lipour les listes ordonnées ;
  • dl, dt, dd pour les listes de définitions ou de descriptions.

Soit recourir aux attributs ARIA permettant de donner la sémantique d’une liste non ordonnée ou ordonnée à un contenu balisé de manière plus générique :

  • donner au conteneur de la liste un attribut role="list" ;
  • donner à chaque élément de la liste un attribut role="listitem" ;
  • (il n’existe pas d’équivalent aux listes de définitions via un rôle ARIA). 

En savoir plus: ul sur MDN - ol sur MDN - dl sur MDN

Contrôle

Pour chaque page contenant une liste :

  • Contrôler le code source des contenus présentés sous forme de liste (caractérisés par la présence de retours à la ligne et de marqueurs de listes tels que des puces ou des numéros) à l’aide d’un inspecteur de code.
  • Vérifier si le code source de ces listes apparentes comporte bien les éléments HTML correspondant au type de liste concerné : ul, li pour une liste non ordonnée (liste à puces), ol, li pour une liste ordonnée (liste numérotée) et dl, dt, ddnpour une liste de définitions ou, à défaut, les rôles ARIA list et listitem.

Découvrez la certification Opquast

Rejoignez la communauté des certifiés Opquast. Plus de 5000 professionnels formés à la qualité Web. Au programme une formation en ligne de 14h, un examen de 1h30, un badge et un score à mettre sur votre cv et votre profil linkedin.

Commander en ligne