Liste déroulante
La liste déroulante est un élément d’interaction avec l’interface permettant à l’usager de choisir un élément dans une liste donnée.
Le composant Liste déroulante est conçu pour être accessible et respecter les critères du RGAA. Voici les points clés à prendre en compte pour en garantir l’accessibilité.
Interactions clavier
Lorsque le focus est positionné sur la liste déroulante :
-
Flèche bas: ouvre la liste déroulante et permet de naviguer entre les options. -
Flèche haut: ouvre la liste déroulante et permet de naviguer entre les options. -
Espace: ouvre la liste déroulante et sélectionne l’option mise en surbrillance.
Règles d’accessibilité
Intitulé pertinent : nom accessible
Une liste déroulante doit avoir une étiquette pertinente. On doit en comprendre la fonction sans ambiguïté.
Son nom accessible est calculé par ordre de priorité à partir de :
-
l’attribut
aria-labelledby, -
l’attribut
aria-label, -
l’élément
<label>, -
l’attribut
titleen l’absence d’une autre méthode de nommage.
Privilégier l’élément
<label>
pour nommer le composant.
La liaison explicite
for/id
permet d’assurer une compatibilité avec l’ensemble des
technologies d’assistance (ex. le contrôle vocal).
Étiquette visible et accolée
L’étiquette est visible et accolée à la liste déroulante.
État désactivé
La bordure, la coche et l’étiquette de la liste déroulante désactivée sont insuffisamment contrastées. Il ne s’agit néanmoins pas d’une non-conformité au RGAA (cas particulier).
Message d’information, d’avertissement ou d’erreur
Il existe différentes méthodes pour gérer les messages d’information, d’avertissement ou d’erreur d’un formulaire de manière accessible selon le contexte.
Il est possible d’indiquer l’information, l’avertissement ou l’erreur :
- dans l’étiquette du champ,
- dans un passage de texte avant le formulaire,
-
dans un passage de texte relié au champ de saisie avec
l’attribut
aria-describedby, -
avec une live region :
role="alert",role="status",aria-live="assertive", aria-live="polite"(dans certains contextes uniquement).
Champ obligatoire
Ajouter une mention visible pour tout le monde au début du
formulaire et utiliser l’attribut
required pour indiquer
que sélectionner une option est obligatoire.
Contrastes de couleurs
Par défaut, le composant Liste déroulante est suffisamment contrasté en thème clair et en thème sombre.
Restitution par les lecteurs d’écran
Par défaut, les lecteurs d’écran restituent le nom, la description, l’état et le type. L’ordre peut varier en fonction des lecteurs d’écran et de leur configuration.
L’attribut disabled est
restitué différemment selon les lecteurs d’écran :
- VoiceOver macOS et iOS : « estompé »
- NVDA et JAWS : « bouton non disponible »
- Narrateur et Talkback : « bouton désactivé »
Critères RGAA applicables
- Couleurs : 3.1, 3.2, 3.3
- Présentation de l’information : 10.1, 10.2, 10.3, 10.4, 10.5, 10.7, 10.11, 10.12
- Formulaires : 11.1, 11.2, 11.4, 11.5, 11.6, 11.7, 11.8, 11.10, 11.11
- Navigation : 12.8, 12.9
- Consultation : 13.9, 13.11