Listes

Conception avec des listes

Lorsqu'un lecteur d'écran rencontre une liste, il énonce l'information utile que les utilisateurs voyants captent d'un coup d'oeil : la présence d'une liste et le nombre d'éléments de la liste. Toutefois, pour être reconnaissable et navigable par les utilisateurs du lecteur d'écran, la liste doit utiliser le balisage sémantique approprié.

HTML fournit trois structures de liste, chacune comportant une sémantique spécifique:

• Utiliser des listes non ordonnées (<ul>) lorsque l'ordre des éléments n'est pas pertinent. Chaque élément de liste (<li>) dans une liste non ordonnée est marqué d'une puce.
• Utiliser les listes ordonnées (<ol>) pour l'information séquentielle. Chaque élément de liste (<li>) est numéroté par le navigateur.
• Utiliser les listes de descriptions (<dl>) pour regrouper les termes associés(<dt>) et leurs descriptions (<dd>).

Les éléments de liste individuels peuvent contenir divers éléments HTML, y compris des paragraphes, des en-têtes, des éléments de forme et d'autres listes (imbriquées) – tout type de contenu de flux.

Évitez d'imbriquer plusieurs éléments enfants dans chaque élément de la liste, puisque les utilisateurs du lecteur d'écran peuvent perdre le fil de la liste elle-même.

Les listes non-ordonnées sont d'habitude utilisées pour contenir des menus horizontaux et verticaux (pour la navigation, les médias sociaux et puis n'importe quelle liste de liens). Les listes ordonnées sont souvent utilisées pour la navigation.

Liste non ordonnée

La liste non ordonnée comprend un élément <ul> et plusieurs éléments de liste (<li>):

HTML

Début du code

<ul>
   <li>Maïs</li>
   <li>Tomates</li>
   <li>Haricots</li>
   <li>Oignons</li>
   <li>Ail</li>
</ul>

Fin du code

Liste ordonnée

La liste ordonnée comprend un élément <ol> et plusieurs éléments de liste (<li>):

Utilisez des listes ordonnées (<ol>) pour des renseignements séquentiels, lorsque l'ordre des éléments est pertinent. Chaque élément de liste (<li>) est numéroté par le navigateur.

HTML

Début du code

<ol>
   <li>Cuire les haricots pendant 45 minutes.</li>
   <li>Couper les légumes en petits cubes.</li>    
   <li>Faire sauter les oignons et l'ail.</li>
   <li>Déglacer avec les tomates.</li>
   <li>Ajouter le maïs et les haricots.</li>
</ol>

Fin du code

Listes imbriquées

Chaque liste peut être imbriquée dans une autre liste. Dans l'exemple suivant, l'ordre de préparation n'est pas critique, mais la préparation elle-même doit être effectuée avant d'utiliser les ingrédients. L'information est encore facile à assimiler, et la technologie d'assistance peut facilement informer les utilisateurs du nombre d'étapes.

HTML

Début du code

<ol>
   <li>Préparer les ingrédients
      <ul>
         <li>Cuire les haricots pendant 45 minutes.</li>
         <li>Couper les légumes en petits cubes.</li>
      </ul> 
   </li>
   <li>Faire sauter les oignons et l'ail.</li>
   <li>Déglacer avec les tomates.</li>
   <li>Ajouter le maïs et les haricots.</li>
</ol>

Fin du code

Liste de descriptions

Une liste de descriptions comprend un ou plusieurs groupes de termes et de descriptions. Chaque regroupement associe un ou plusieurs termes (le contenu des éléments <dt>) à une ou plusieurs descriptions (le contenu des éléments <dd>).

Un regroupement commence soit avec le premier élément de la liste, soit chaque fois qu'un élément <dt> suit un élément <dd>.

<dl>  
   <dt>Auteurs</dt>
   <dd>John</dd>  
   <dd>Luke</dd>
   <dt>Éditeur</dt>  
   <dd>Frank</dd>
</dl>

dt { font-weight: 700; }
dd { margin-left: 30px; }

<dl>
   <dt>Producteur</dt> 
   <dt>Réalisateur</dt>
   <dd>Ian</dd>  
   <dt>Écrivaine</dt>
   <dd>Annie</dd>
</dl>

dt { font-weight: 700; }
dd { margin-left: 30px; }

<dl>
   <dt>Auteurs</dt> 
   <dt>Éditeurs</dt>
   <dd>John</dd>  
   <dd>Luke</dd>
</dl>

dt { font-weight: 700; }
dd { margin-left: 30px; }

<dl>   
   <dt><dfn lang="en-US">color</dfn></dt>
   <dt><dfn lang="en-GB">colour</dfn></dt>
   <dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.</dd>
</dl>

dt { font-weight: 700; }
dd { margin-left: 30px; }

Ressources WCAG connexes

La description des trois types de liste est tirée du document Initiative d'accessibilité du Web (WAI): Structure du contenu (WAI) dans Tutoriel sur la structure des pages de Tutoriels sur l'accessibilité du Web.. Eric Eggert, Shadi Abou-Zahra, éd. Copyright © 2019 W3C (MIT, ERCIM, Keio). État d'avancement : Mise à jour le 27 juillet 2019. https://www.w3.org/WAI/tutorials/page-structure/content/