'/%3E%3C/svg%3E){kind=small}
Nouveau Components
Liste déroulante
La liste déroulante permet de choisir une valeur parmi un ensemble d’options qui s’affiche à la demande. Sous cette appellation unique se rangent quatre constructions distinctes, de l’élément natif au motif entièrement reconstruit : liste native, combobox à sélection seule, combobox avec filtrage et sélection multiple. Le choix engage la totalité du code à écrire et à maintenir, et doit être fait en connaissance de cause.
Quand utiliser une liste déroulante
- Choix dans une liste fermée : les valeurs possibles sont connues à l'avance et l'utilisateur doit en retenir une.
- Liste longue : au-delà de sept ou huit entrées, la liste déroulante économise l'espace et la lecture.
- Liste très longue : avec filtrage, quand taper trois lettres est plus rapide que parcourir cent lignes.
Quand ne pas en utiliser
- Deux ou trois options : des boutons radio montrent tout d'un coup et coûtent un clic de moins.
- Choix binaire : une case à cocher ou un interrupteur dit mieux qu'on active ou désactive.
- Valeur libre : si l'utilisateur peut saisir ce qu'il veut, c'est un champ texte.
Modes d'action
- Souris : le clic ouvre la liste, un second clic retient la valeur.
- Clavier : la liste s'ouvre à Entrée, Espace ou flèche. Les flèches parcourent, Entrée valide, Échap annule.
- Lecteur d'écran : le select natif est restitué sans effort. Les variantes ARIA reposent sur role="combobox", role="listbox" et aria-activedescendant.
Contenu
- Un label visible : la valeur affichée n'est pas un label, elle change.
- Des intitulés distincts : deux options homonymes deviennent impossibles à départager à la voix.
- Un ordre prévisible : alphabétique, chronologique ou par fréquence, mais jamais aléatoire.
Mots-clés
- combobox : rôle d'un contrôle qui associe une valeur courante à une liste d'options.
- aria-activedescendant : désigne l'option courante sans déplacer le focus DOM. Ne jamais mélanger cette technique avec un focus réel.
- aria-expanded : dit si la liste est ouverte ou fermée. Il se pose sur l'élément qui a le focus.
- aria-multiselectable : indique qu'une listbox accepte plusieurs valeurs.
Liste déroulante native
Le select natif reste le premier choix : restitution, clavier, mobile et format local sont acquis sans une ligne de script.
- Aucun rôle ARIA n'est ajouté : le doubler créerait une restitution contradictoire.
- Le label est visible et associé par for. Les options sont regroupées par optgroup quand la liste s'allonge.
Combobox à sélection seule
À n'employer que lorsque le select natif ne peut pas convenir : options sur plusieurs lignes, icônes, mise en forme riche.
- Le focus DOM ne quitte jamais le bouton. aria-activedescendant désigne l'option courante.
- aria-labelledby pointe le label du champ, et lui seul : la valeur est le contenu du bouton, exposée comme valeur du composant. La mettre aussi dans le nom la ferait entendre deux fois.
- Aucune région live n'est ajoutée : la fermeture change aria-expanded sur l'élément qui a le focus, et le composant est relu avec sa nouvelle valeur.
- La liste s'ouvre à la souris comme au clavier. Entrée et Espace valident, Échap et Tabulation annulent.
Combobox avec filtrage
Pour les listes longues : l'utilisateur tape, la liste se réduit.
- Le champ porte aria-autocomplete="list" : la saisie filtre, elle ne complète jamais le texte à la place de l'utilisateur.
- Le bouton d'ouverture est un bouton réel, dans l'ordre de tabulation. Un tabindex="-1" en ferait une commande réservée à la souris.
- Quand aucune option ne correspond, le message prend la place de la liste mais reste EN DEHORS de la listbox : une listbox ne peut contenir que des options, tout autre élément y est élagué de l'arbre d'accessibilité (WCAG 1.3.1 et 4.1.3).
- Le nombre de résultats est annoncé après une pause de 500 ms, pour ne pas couper l'écho de frappe.
Sélection multiple
Quand plusieurs valeurs peuvent être retenues en même temps.
- La liste porte aria-multiselectable="true" et chaque option porte aria-selected, y compris à false : sans cela, rien ne dit que l'option est sélectionnable.
- Le déclencheur est un bouton de divulgation, pas un combobox. Un combobox ne porte qu'une seule valeur : le lecteur d'écran présenterait alors l'option active comme cette valeur, sans dire si elle est sélectionnée. Le résumé des choix est rattaché au nom du bouton par aria-labelledby, et des cases à cocher toujours visibles sont un autre motif, pas une liste déroulante.
- La sélection est signalée par une coche dessinée, pas par la seule couleur (WCAG 1.4.1).
- Le récapitulatif des valeurs retenues est annoncé par une région live, sans déplacement de focus.
Lecteur d'écran
- Le select natif se suffit à lui-même : c'est la variante la plus fiable sur l'ensemble des couples navigateur et lecteur d'écran.
- Sur les variantes ARIA, le focus DOM reste à un seul endroit. Les deux techniques, focus réel et aria-activedescendant, ne se mélangent jamais.
- L'option courante a besoin d'un marqueur visuel propre, distinct de la sélection, et contrasté avec elle (WCAG 1.4.11).
- Toute annonce passe par une région live présente dès le chargement, et vide.
Les interactions clavier diffèrent selon la construction retenue. Avec l'élément natif, elles sont assurées par le navigateur. Avec les motifs reconstruits, elles sont entièrement à implémenter.
Liste déroulante native
| Touche | Fonction |
|---|---|
| Tab | Déplace le focus vers le composant. |
| Flèches haut et bas | Ouvrent la liste, ou changent la valeur retenue selon le navigateur et le système. |
| Caractères | Recherche par frappe : porte la sélection sur la première option commençant par les caractères saisis. |
| Entrée | Retient l'option active et referme la liste. |
| Échap | Referme la liste sans changer la valeur. |
Combobox à sélection seule
| Touche | Fonction |
|---|---|
| Tab | Déplace le focus vers le combobox. La liste ne constitue pas un arrêt de tabulation. |
| Entrée ou Espace | Ouvre la liste. Lorsque la liste est ouverte, retient l'option active et referme. |
| Flèche bas | Ouvre la liste, ou déplace l'option active vers la suivante. |
| Flèche haut | Ouvre la liste, ou déplace l'option active vers la précédente. |
| Début et Fin | Portent l'option active à la première ou à la dernière option de la liste. |
| Caractères | Recherche par frappe : porte l'option active sur la première option commençant par les caractères saisis. |
| Échap | Referme la liste sans changer la valeur. |
Combobox avec filtrage
| Touche | Fonction |
|---|---|
| Tab | Déplace le focus vers le champ de saisie. Le bouton d'ouverture ne constitue pas un arrêt de tabulation. |
| Flèche bas | Ouvre la liste, ou déplace l'option active vers la suivante. |
| Flèche haut | Ouvre la liste en plaçant l'option active sur la dernière, ou déplace l'option active vers la précédente. |
| Alt + Flèche bas | Ouvre la liste sans déplacer l'option active. |
| Alt + Flèche haut | Retient l'option active et referme la liste. |
| Entrée | Retient l'option active et referme la liste. Lorsque aucune option n'est active, valide la saisie. |
| Échap | Referme la liste sans retenir d'option. Une seconde pression peut effacer le contenu du champ. |
| Touches d'édition | Saisie et correction de la valeur : caractères, déplacement du curseur, suppression. |
Sélection multiple
| Touche | Fonction |
|---|---|
| Tab | Un seul arrêt de tabulation, le bouton. Une fois la liste dépliée, le focus entre dedans : c'est ce qui fait annoncer l'état de chaque option. Tab la referme, rend le focus au bouton et conserve les choix. |
| Entrée ou Espace | Déplie la liste quand elle est repliée. Dans la liste, coche ou décoche l'option courante sans refermer, pour permettre d'en choisir plusieurs à la suite. |
| Flèches haut et bas | Déplient la liste si elle est repliée, puis déplacent l'option courante. |
| Origine et Fin | Portent l'option courante au premier ou au dernier élément de la liste. |
| Échap | Replie la liste. Les choix faits sont conservés : en sélection multiple ils sont pris au fur et à mesure, il n'y a pas de validation finale à abandonner. |
| Touches de caractères | Recherche par saisie : les frappes s'accumulent pendant 500 ms et portent l'option courante sur le premier libellé qui commence par ce texte. |
Note : dans les trois premières constructions, le focus du document ne quitte jamais le combobox pendant le parcours de la liste, parce que le déplacer romprait la saisie sur la variante avec filtrage. Le déplacement perçu est un focus visuel, géré par aria-activedescendant. La sélection multiple fait l'inverse, et il le faut : le focus entre dans la listbox, sans quoi les lecteurs d'écran ne disent pas si l'option active est sélectionnée. À l'intérieur, l'option courante reste désignée par aria-activedescendant.