Les listes déroulantes permettent de présenter aux internautes plusieurs options parmi lesquelles elles et ils doivent faire un choix.

Utilisation

Les listes déroulantes sont utilisées dans les listes filtrables dynamiques ou dans les questionnaires interactifs. Elles sont idéales lorsqu'une utilisatrice ou un utilisateur doit sélectionner entre 5 et 15 options possibles et que l'espace est limité pour les afficher.

Notez que les listes déroulantes ne permettent pas de sélectionner plusieurs options. Vous devez plutôt prioriser les cases à cocher si différentes options peuvent être sélectionnées.

Structure

1. Libellé de la liste déroulante
2. Options de la liste affichées par défaut
3. Chevron indiquant que la liste peut être déroulée

États

Les listes déroulantes ont trois états d'interaction distincts.

État actif

L'état actif indique que l'utilisatrice ou l'utilisateur peut cliquer sur la liste déroulante. C'est l'état qui est affiché par défaut lors du chargement d'une page.

État déployé

Lorsque l'internaute clique sur la liste déroulante, un contour noir s'y superpose et les différentes options de la liste se déploient.

Chaque fois que le curseur survole une option de la liste, celle-ci change de couleur pour indiquer qu'elle peut être sélectionnée.

État focus

L'état focus s'affiche lorsque l'utilisatrice ou l'utilisateur navigue au moyen du clavier. Il lui permet de savoir où elle ou il se situe dans la page par rapport aux éléments interactifs.

Comportement

Les options de la liste sont habituellement placées en ordre alphabétique ou alphanumérique. Dans certains cas, il est recommandé d'afficher les options les plus courantes ou pertinentes en premier.

La largeur par défaut de chaque liste déroulante est déterminée en fonction du plus long libellé de la liste, afin que toutes les options soient lisibles dans leur entièreté.

Libellés

Les libellés qui s'affichent au-dessus de chaque liste déroulante ne doivent pas être des instructions. Ils doivent décrire ce que contient la liste.