Curseur
Le curseur est un élément d’interaction avec l’interface permettant à l’usager de délimiter manuellement une sélection par rapport à une valeur minimale et maximale.
Le composant Curseur 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 le curseur :
-
Flèche gaucheouFlèche bas: diminue la valeur du curseur. -
Flèche droiteouFlèche haut: augmente la valeur du curseur.
Règles d’accessibilité
Intitulé pertinent : nom accessible
Un curseur 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.
Curseur simple
Dans le cas du curseur simple, utiliser l’élément
<label> avec une
liaison explicite entre l’attribut
for de l’élément
<label> et
l'attribut id.
Préciser les valeurs minimum et maximale dans le texte de description additionnel.
Curseur double
Pour le curseur double avec deux
input type="range", on peut utiliser l’attribut
aria-labelledby ou
l’attribut aria-label.
En cas d’utilisation de l’attribut
aria-labelledby, le
texte additionnel doit être très explicite pour permettre de
comprendre qu’il y a deux curseurs (un minimum / un maximum).
Si aria-label est la
méthode retenue, il faudra veiller à ce que le contenu de
l’étiquette visible soit bien repris.
Exemple :
aria-label="[Minimum - Label Texte de description
additionnel]"
et
aria-label="[Maximum - Label Texte de description
additionnel]"
Étiquette visible et accolée
L’étiquette est visible et accolée au curseur.
État désactivé
Les éléments du curseur désactivé sont insuffisamment contrastés. 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).
Contrastes de couleurs
Le composant Curseur est suffisamment contrasté en thème clair et en thème sombre.
Restitution par les lecteurs d’écran
L’input type="range" est bien supporté par les différents lecteurs d’écran.
Il est vocalisé « curseur » (VoiceOver, TalkBack), « potentiomètre » (Narrateur, NVDA, JAWS).
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.
Restitution de l'état désactivé
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é »