Listes

Intégration des bibliothèques

Utilisez le code ci-dessous pour ajouter cet élément à votre projet. Téléchargez la dernière version de la bibliothèque pour implémenter facilement notre ensemble complet d’éléments.

Angular

<cpc-ds-lists
     heading="Ordered checklist"
     [lists]='[{ text: "Vehicula Magnaaa" }, { text: "ABC" }, { text: "Proin tincidunt, neque sed consequat blandit" }]'>
</cpc-ds-lists>

<cpc-ds-lists 
    heading="Unordered checklist" 
    [lists]='listObject'
    listType="unordered">
</cpc-ds-lists>

HTML

<script src="[JS-PLACE-HOLDER]"></script> 

<!-- Unordered lists --> 
<p class="lists" id="list1">Race Result</p> 
<ul aria-labelledby="list1"> 
<li>Vehicula Magna</li> 
<li>Pharetra Vulputate Euismod</li> 
<li>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li> 
</ul>

<p class="lists" id="list2">Race Result</p> 
<ol aria-labelledby="list2"> 
<li>Vehicula Magna</li>
<li>Pharetra Vulputate Euismod</li> 
<li>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ol>

Lignes directrices générales

Types de Listes

Il existe deux types de listes :

les listes non ordonnées (avec puces) et les listes ordonnées (numérotées).

Les deux types de listes prennent également en charge l’imbrication.

Design réactif

Le texte très long passera à la ligne suivante sur les petits écrans. Vérifiez que tout le texte est aligné avec le texte de l’élément et non avec la puce ou le numéro.

Les puces de chaque élément doivent être alignées à la verticale avec la première ligne de l’élément.

Formatage

Ne dressez pas de listes trop longues. Travaillez avec votre rédacteur de contenu pour trouver des solutions de rechange aux listes longues pour ne pas submerger l’utilisateur. Tenez compte des éléments suivants :

• Répartir les éléments en plusieurs listes.
• Préparer des tableaux plutôt que des listes (utiles pour comparer les produits et services).
• Utiliser des menus déroulants pour réduire la charge cognitive.

Lignes directrices générales

Utilisez une structure grammaticale parallèle pour les listes numérotées et à puces. Le style doit être uniforme et chaque élément doit commencer par la même partie grammaticale.

Si 2 éléments ou plus ont une structure similaire, intégrez leur partie commune dans l’introduction. Cela permet de raccourcir la longueur des éléments.

Facteurs à prendre en compte en matière d’accessibilité

Les lecteurs d’écran détectent les listes non ordonnées, mais d’ordinaire ne distinguent pas les niveaux de retrait. Si vous utilisez des listes imbriquées (listes à l’intérieur de listes), songez à recourir à un système de numérotation ou de puces différent aux niveaux primaire et secondaire pour aider les lecteurs d’écran à les distinguer.

Assurez-vous que les listes non ordonnées utilisent les bonnes étiquettes <ul> et que les listes ordonnées utilisent les bonnes étiquettes <ol> pour aider les lecteurs d’écran à naviguer dans la structure de liste en tant que groupe d’éléments connexes.

Spécifications du design

Lignes directrices

Listes imbriquées

La sous-liste d’un article de la liste peut être présentée comme une liste imbriquée. Le développeur doit coder une liste imbriquée de sorte que la sous-liste se trouve entre les étiquettes d’ouverture et de fermeture de son élément de liste parent.

Étiquettes de listes

Fournir une étiquette de liste peut être utile pour les utilisateurs de lecteurs d’écran, surtout lorsqu’il y a de nombreuses listes sur la page ou que la liste représente des étapes rapides.

Remarque : L’étiquetage des listes est une bonne pratique, mais faites attention à la longueur des étiquettes. Une étiquette ne doit pas compter plus de trois à cinq mots et doit être claire et descriptive. Utiliser de longues étiquettes de liste peut être plus frustrant que de ne pas en utiliser du tout. Il n’est pas nécessaire d’utiliser des étiquettes pour toutes les listes.

Vous pouvez étiqueter les listes de trois façons :

Option 1

Utiliser aria-labelledby lorsque l’étiquette est visible sur la page. L’attribut aria-labelledby figurera sur l’élément de liste (<ul> ou <ol>) et a la valeur du numéro d’identification de l’élément contenant l’étiquette visible.

Option 2

Utiliser aria-label lorsque l’étiquette n’est pas visible sur la page. L’attribut aria-label figurera sur l’élément de liste (<ul> ou <ol>) et aura la valeur de la chaîne de caractères représentant l’étiquette.

Option 3

Utiliser l’attribut du titre lorsque l’étiquette n’est pas visible sur la page. L’attribut du titre figurera sur l’élément de liste (<ul> ou <ol>) et aura la valeur de la chaîne de caractères représentant l’étiquette. L’approche de l’attribut du titre n’est pas recommandée, car l’attribut arrive en dernier dans le calcul du nom accessible pour un élément. Si l’un des attributs aria-labelledby ou aria-label figure sur la liste, l’attribut du titre fournit une description accessible.

Masquer les puces

Les puces ou les chiffres peuvent être masqués dans les listes pour des raisons esthétiques. Il ne s’agit pas d’un problème, mais les utilisateurs de lecteurs d’écran doivent tout de même être en mesure de percevoir le regroupement logique. Par conséquent, la sémantique de la liste doit être maintenue.

Chaque fois que des puces ou des chiffres sont masqués, ajoutez le rôle=liste à l’élément de liste (<ul> ou <ol>). Ainsi, toutes les technologies d’assistance conservent la sémantique de la liste. Certaines technologies d’assistance ignorent l’information sémantique lorsque les puces sont retirées.

Tables des matières en format de liste

Lorsque vous concevez une table des matières en format de liste, placez un en-tête visible avant la liste des liens. Associez le titre à la liste à l’aide d’un attribut aria-labelledby sur l’élément de liste (<ul> ou <ol>). L’ensemble du composant peut également être inclus dans une région de navigation, selon le contexte. Par exemple, l’élément de navigation HTML ou le rôle=navigation dans un élément div.

Test

Au moment de tester une liste, le testeur doit s’assurer de ce qui suit :

• La liste a le rôle d’une « list ».
• Le lecteur d’écran annonce le rôle avec le nombre d’articles de la liste.
• Le nombre d’articles de la liste annoncé correspond au nombre d’articles visibles de la liste. Les listes imbriquées ne doivent pas être comptées comme des articles de liste.
• Le lecteur d’écran annonce si une étiquette est associée à une liste pendant l’interaction avec la liste.
• La sémantique est maintenue même lorsque les puces ou les chiffres sont cachés. L’attribut role=list doit être présent sur l’élément de liste (<ul> ou <ol>) si les puces ou les chiffres sont masqués.

Contenu connexe

• Pistes de navigation