Vous êtes à : Blog > Jour 24 - Les listes

Jour 24 - Les listes

Gérer les listes avec les éléments appropriés.

Ce que j’ai fait :

Ce que j’ai appris

Baliser sémantiquement des listes

Utiliser les balises sémantiques adaptées pour afficher des listes est essentiel pour les internautes utilisant des lecteurs d’écran. En effet, le lecteur d’écran donne des informations importantes telles que le nombre d’éléments que contient une liste, ainsi que le niveau de l’élément dans la liste. La structuration en liste facilite également la navigation : passer directement à la fin de la liste ou revenir au début, naviguer de liste en liste dans une page.

Pour être considérée comme telle, une liste doit posséder à minima deux éléments.

Liste non ordonnée

Une liste non ordonnée, par exemple des liens d’un menu de navigation ou un plan du site, doit être balisée avec les éléments <ul> et <li> :

<ul>
  <li>175 g de farine</li>
  <li>20 g de fécule de maïs</li>
  <li>1 cuillère à soupe de sucre en poudre</li>
  <li>1 cuillère à soupe de levure chimique</li>
  <li>1 bonne pincée de sel</li>
  <li>250 ml de lait végétal</li>
  <li>2 cuillères à soupe d'huile végétale</li>
</ul>

Liste ordonnée

Une liste ordonnée, par exemple les étapes d’un processus ou un classement, doit être balisée avec les éléments <ol> et <li> :

<ol>
  <li>Mélanger les ingrédients secs: farine, fécule, sucre, levure et sel. </li>
  <li>Creuser un puits au centre, ajouter l'huile et le lait végétal.</li>
  <li>Fouetter vivement la préparation pour obtenir un mélange bien lisse.</li>
  <li>Faire chauffer une poêle légèrement graissée. Quand elle est chaude, verser 2 cuillères à soupe de pâte (elle va s'étaler toute seule). Quand des bulles se forment à la surface, retourner le pancake et poursuivre la cuisson environ 1 minute. Renouveler jusqu'à épuisement de la pâte. </li>
</ol>

Liste de description

Une liste de description (ou de définition), par exemple le couple terme/description d’un glossaire, doit être balisée avec les éléments <dl>, <dt> (terme à décrire) et <dd> (description). Un terme (balise <dt>) peut avoir plusieurs descriptions (balise <dd>). Voici un exemple avec un glossaire :

<dl>
   <dt>Fécule de maïs</dt>
   <dd>La fécule de maïs (ou maïzena) est extraite de l'amidon du maïs. Elle possède des propriétés gélifiantes utilisées pour épaissir les aliments.</dd>
   <dt>Lait végétal</dt>
   <dd>Boisson produite à base de végétaux destinée à remplacer un lait animal (lait de riz, lait de soja, lait d'avoine...)</dd>
</dl>

Et voici un autre exemple avec une description d’actions :

<p>Réalisation</p>
<dl>
   <dt>Difficulté</dt>
   <dd>Facile</dd>
   <dt>Préparation</dt>
   <dd>5 min</dd>
   <dt>Cuisson</dt>
   <dd>2 min</dd>
   <dt>Temps total</dt>
   <dd>7 min</dd>
</dl>

Les attributs Accessible Rich Internet Applications (ARIA) de listes

Il est possible de donner la valeur sémantique d’une liste à des éléments génériques (des <div> ou des <span> par exemple). L’attribut role="list" pour le conteneur de la liste et l’attribut role="listitem" pour chaque élément de la liste permettent de transformer une succession d’éléments en liste ordonnée ou non ordonnée (cette alternative n’est en revanche pas possible pour une liste de description). Par exemple :

<p>Recettes similaires</p>
<div role="list">
<p role="listitem">Pancakes à la farine de coco</p>
<p role="listitem">Crêpes au sucre</p>
<p role="listitem">Pancakes à la pomme</p>
<div>

Néanmoins, comme le préconise la première règle d’ARIA (en anglais), on doit prioritairement utiliser un élément natif plutôt que de surcharger un élément avec un rôle ARIA.

D’autre part, certaines fonctionnalités de navigation rapide dans les éléments de listes peuvent ne plus fonctionner avec une implémentation de liste ARIA. On ne doit donc recourir à cette possibilité que lorsqu’il n’est pas possible d’utiliser une vraie liste avec les balises appropriées.

Note de l’autrice

La recette utilisée en exemple est celle de pancakes vegans, très facile à réaliser. Vous trouverez l’intégralité de la recette sur Le Journal des Femmes - Cuisine(lien externe).