Il y a une raison pour laquelle la plupart des frameworks et bibliothèques JavaScript utilisent une application "Todo" pour présenter leurs applications de démonstration : les gens adorent les listes ! Eh bien, la plupart le font. Les listes sont excellentes dans la mesure où elles aident à donner une structure significative au contenu et aident les lecteurs à rester concentrés en indiquant le nombre de points restants sur le nombre total d'éléments possibles.
Pour cette même raison, l'utilisation d'éléments de liste HTML, dans un contexte approprié, aide tous les utilisateurs à consommer du contenu. Les utilisateurs de lecteurs d'écran ont des avantages supplémentaires car lorsqu'ils rencontrent une liste, le nombre total d'éléments est annoncé. Avec cela, l'utilisateur peut choisir de continuer à explorer les éléments de la liste ou de sauter complètement la liste.
Types de contenu de liste
Quels types de contenu peuvent être considérés comme une liste ? En règle générale, une liste consisterait en un regroupement d'éléments de contenu connexes, généralement de nature concise. Cela dit, voici quelques exemples de contenu de liste valide :
- Naviguer sur le site
- Navigation fil d'Ariane
- Liens vers les médias sociaux
- Page de liste de blogs
- Commentaires des articles de blog
- Liste de collecte
- Liste d'erreurs
- Liste de produits
- Contrôles de case à cocher associés
Il y a plus d'exemples qui pourraient être inclus dans cette liste, mais l'idée à garder à l'esprit est que lorsque le contenu consiste en un regroupement d'éléments connexes, il est probable qu'il devrait s'agir d'une liste. La question demeure, quel élément de liste doit être utilisé ?
Éléments de la liste
Il existe trois types différents d'éléments de liste en HTML. Chacun a sa propre signification sémantique et les utiliser de manière appropriée contribuera grandement à donner un sens à votre contenu.
Voici un bref aperçu de chacun :
- Liste non ordonnée ,
ul; Une liste de contenu connexe sans ordre spécifique. Utilisez-le pour ajouter de la structure et du sens à la navigation, à la page de liste de blogs, aux commandes de flèche du carrousel, etc. - Liste ordonnée ,
ol; Une liste de contenu connexe qui dépend d'une commande spécifique. Utilisez-le pour ajouter un sens aux listes de contrôle, aux éléments du carrousel et aux commandes de puces, etc. - Liste de description ,
dl; Une liste de paires de contenu associées. Utilisez-le pour ajouter du sens lors de la définition de la terminologie, d'une liste de FAQ, de la sortie des prix réguliers/de vente, etc.
Critères de réussite WCAG
Cela revient à 1.3.1 Infos et relations qui stipule :
"Les informations, la structure et les relations véhiculées par la présentation peuvent être déterminées par programme ou sont disponibles dans le texte."