Liste

Mots-clés

• Liste non ordonnée : Utilise des puces pour lister des éléments sans séquence ou priorité spécifique.
• Liste ordonnée : Numérote les éléments pour indiquer un ordre ou une séquence spécifique.

Détail des composants des listes

Liste non ordonnée

• L'implémentation des balises <ul> est essentielle pour que les lecteurs d'écran reconnaissent correctement la liste comme non ordonnée.
• Chaque élément de la liste est encapsulé dans des balises <li> pour préserver la structure et la hiérarchie correctes.
• Les puces sont utilisées pour une présentation visuelle claire, avec des personnalisations CSS prenant en compte les directives de contraste de couleur pour améliorer la visibilité.
• Remarque : L'imbrication excessive des listes peut entraîner de la confusion. Il est donc préférable de maintenir une structure simple et intuitive.

<ul>
  <li>Ipedis</li>
  <li>DocAxess</li>
  <li>Publispeak</li>
</ul>

<ul>
  <li>Ipedis</li>
  <li>DocAxess</li>
  <li>Publispeak</li>
</ul>

Liste ordonnée

• Il est recommandé d'utiliser la balise <ol> pour les listes ordonnées afin de faciliter la compréhension par les lecteurs d'écran de la nature séquentielle de la liste.
• Maintenir l'ordre numérique par défaut est crucial, sauf si une raison spécifique justifie un ordre différent.
• Les éléments de la liste sont systématiquement encapsulés dans des balises <li>, car cela est essentiel pour que les lecteurs d'écran annoncent chaque élément individuellement.
• Remarque : Chaque élément de la liste doit contenir un contenu descriptif adéquat pour être compréhensible dans le contexte de sa numérotation.

<ol>
  <li>Ipedis</li>
  <li>DocAxess</li>
  <li>Publispeak</li>
</ol>

<ol>
  <li>Ipedis</li>
  <li>DocAxess</li>
  <li>Publispeak</li>
</ol>

Liste personnalisée (Incorporation des attributs ARIA pour des fonctions spécifiques)

• Lors de la création de composants de liste personnalisés avec des éléments HTML comme <div> et <span>, l'utilisation d'attributs ARIA role est indispensable pour l'accessibilité des lecteurs d'écran.
• role="list" est appliqué à l'élément parent et role="listitem" à chaque élément d'une liste personnalisée pour garantir une reconnaissance correcte de la structure par les technologies d'assistance.
• Pour une introduction plus explicite de la liste, un attribut aria-label peut être ajouté.
• Il est essentiel de tester rigoureusement ces listes personnalisées avec des lecteurs d'écran, en confirmant que les rôles ARIA rendent efficacement la structure de la liste accessible à tous les utilisateurs.

<div role="list" aria-label="List of items using aria attributes" class="custom-list">
  <div role="listitem">Ipedis</div>
  <div role="listitem">DocAxess</div>
  <div role="listitem">Publispeak</div>
</div>

<div role="list" aria-label="List of items using aria attributes" class="custom-list">
  <div role="listitem">Ipedis</div>
  <div role="listitem">DocAxess</div>
  <div role="listitem">Publispeak</div>
</div>

Lecteur d'écran

• Lorsque les utilisateurs naviguent avec un lecteur d'écran, ils peuvent accéder aux éléments de la liste en utilisant les touches fléchées.
• Cela permet aux utilisateurs de lecteurs d'écran de naviguer à travers les éléments de la liste un par un.