L’un des aspects importants de l’accessibilité est la manière dont les listes sont codées. Dans cet article, nous explorerons les différents types de listes et comment les coder de manière à les rendre accessibles à tous les utilisateurs.
Listes et accessibilité
Les listes non ordonnées
Les listes non ordonnées sont couramment utilisées pour présenter des informations sous forme d’éléments indépendants.
Pour les rendre accessibles, il est essentiel de les coder correctement.
Voici quelques bonnes pratiques à suivre :
Utiliser la balise <ul> : La balise <ul> est utilisée pour définir une liste non ordonnée. Veillez à l’utiliser pour encadrer votre liste.
Exemple :
<ul>
<li>Pommes</li>
<li>Oranges</li>
<li>Bananes</li>
</ul>
La balise <li> est utilisée pour encapsuler chaque élément de la liste.
Les listes ordonnées
Les listes ordonnées sont utilisées lorsque l’ordre des éléments est important (recette par exemple).
Pour les rendre accessibles:
Utiliser la balise <ol> : La balise <ol> est utilisée pour définir une liste ordonnée. Veillez à l’utiliser pour englober votre liste.
Exemple :
<ol>
<li>Introduction</li>
<li>Développement</li>
<li>Conclusion</li>
</ol>
Comme pour les listes non ordonnées, chaque élément doit être enveloppé dans une balise <li>.
Les listes imbriquées
Il est courant d’avoir des listes imbriquées, c’est-à-dire des listes dans des listes. Pour garantir leur accessibilité :
Utilisez les balises <ul> et <ol> de manière appropriée pour définir les listes principales et les listes imbriquées.
Exemple :
<ul>
<li>Pommes</li>
<li>Oranges
<ul>
<li>Sanguines</li>
<li>Navel</li>
</ul>
</li>
<li>Bananes</li>
</ul>
Indentez le code HTML pour refléter la structure des listes imbriquées. Cela facilitera la compréhension de la hiérarchie des éléments pour les utilisateurs ayant des lecteurs d’écran.
Les attributs role= »list »et role= »listitem »
Les attributs role= »list »et role= »listitem » sont des attributs de rôle définis par la spécification WAI-ARIA (Accessible Rich Internet Applications) pour améliorer l’accessibilité des éléments de la liste dans le HTML.
L’attribut role= »list »est utilisé pour indiquer que l’élément en question représente une liste. Il permet d’informer les technologies d’assistance que l’élément est une liste et qu’il doit être traité en conséquence. Cela permet aux utilisateurs ayant des handicaps de comprendre la structure et le contexte de l’information présentée.
Exemple :
<div role= »list »>
<div role= »listitem »>Élément 1</div>
<div role= »listitem »>Élément 2</div>
<div role= »listitem »>Élément 3</div>
</div>
Dans cet exemple, nous utilisons une structure <div>pour représenter une liste et chaque élément de la liste est un <div>avec l’attribut role= »listitem ». Cela permet d’indiquer que ces éléments représentent des éléments de liste individuels.
L’utilisation de ces attributs de rôle est particulièrement utile lorsque vous créez des listes personnalisées à l’aide d’autres éléments HTML, comme <div> au lieu de balises de liste traditionnelles <ul>, <ol>et <li>. Cela permet aux technologies d’assistance de reconnaître correctement la structure de la liste, même si elle est implémentée différemment.
Il convient de noter que’il est recommandé d’utiliser les balises de liste HTML standard ( <ul>, <ol>et <li>) plutôt que d’utiliser des éléments personnalisés avec des rôles définis.
Conclusion
Coder les différents types de listes de manière accessible est essentiel pour garantir une expérience utilisateur équitable à tous les utilisateurs, y compris ceux ayant des handicaps. En utilisant les balises HTML appropriées, telles que `<ul>, <ol>, et <li>`, et en suivant les bonnes pratiques telles que l’indentation et l’organisation logique des éléments, nous pouvons créer des listes accessibles.