8.3. Baliser les listes de descriptions avec <dl>, <dt> et <dd>

Utiliser les balises <dl>, <dt> et <dd> pour baliser les listes de descriptions.

Une liste de descriptions correspond à un groupement de clés/valeurs que l’on peut rencontrer par exemple sur une fiche produit ou un glossaire.

Remarque

Une clé (balise <dt>) peut avoir plusieurs valeurs (balise <dd>).

Exemple avec une description d’un événement :

<h2>Conférence sur l'accessibilité web</h2>
<dl>
   <dt>Lieu</dt>
   <dd>Paris</dd>
   <dt>Dates</dt>
   <dd>Samedi 7 septembre</dd>
   <dd>Mercredi 14 octobre</dd>
   <dt>Heure</dt>
   <dd>À partir de 10 heures</dd>
</dl>

Exemple avec un glossaire :

<dl>
   <dt><dfn>ARIA</dfn></dt>
   <dd lang="en">Accessible Rich Internet Application</dd>
   […]
   <dt><dfn>RGAA</dfn></dt>
   <dd>Référentiel Général d'Amélioration de l'Accessibilité</dd>
   […]
</dl>

Quels bénéfices ?

La structuration des listes est essentielle pour les personnes utilisant un lecteur d’écran (personnes aveugles et malvoyantes). Cette structuration leur permet ainsi, à la rencontre d’une liste de :

  • Naviguer de liste en liste au sein d’une page.
  • Connaître dès le départ le nombre d’éléments dans celle-ci.
  • Naviguer plus facilement dans la liste :
    • Passer directement à la fin de la liste si ce contenu ne les intéresse pas.
    • Revenir facilement au début de la liste.

Commentaires

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page