Bouton
Le bouton est un élément d’interaction avec l’interface permettant à l’usager d’effectuer une action.
Le composant Bouton 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 composant :
-
Entrée: actionne le bouton. -
Espace: actionne le bouton.
Règles d’accessibilité
Intitulé pertinent : nom accessible
Un bouton doit avoir un intitulé pertinent. 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, - le contenu textuel à l’intérieur du bouton,
-
l’attribut
titleen l’absence d’une autre méthode de nommage.
Privilégier le contenu textuel pour nommer le composant Bouton.
À faire
Utiliser un intitulé textuel précis.
À ne pas faire
Utiliser un intitulé générique et ambigu.
Nom visible et nom accessible
En cas d’utilisation des attributs
aria-labelledby ou
aria-label sur des
boutons textuels, le
nom visible doit être repris dans le nom accessible afin de
répondre aux besoins des personnes qui utilisent la commande
vocale.
Information complémentaire : description
Il est possible de compléter et d’expliciter l’intitulé d’un bouton avec une description en utilisant :
-
l’attribut
aria-describedbyavec une valeur d’id qui référence un passage de texte ; -
l’attribut
title.
Bouton avec icône seule
Dans le cas des boutons avec icône seule, un attribut
title, qui reprend
l’intitulé du bouton, peut être ajouté afin d’expliciter le sens
de l’icône pour les personnes qui en ont besoin.
État désactivé
- Le texte des boutons désactivés est insuffisamment contrasté. Il ne s’agit néanmoins pas d’une non-conformité au RGAA (cas particulier).
- Lorsqu’un bouton est désactivé avec l’attribut disabled, il ne prend pas le focus au clavier.
À ne pas faire
Ne pas désactiver un bouton avec une infobulle (tooltip).
À ne pas faire
Ne pas désactiver un bouton de soumission d’un formulaire.
Contrastes de couleurs
Le composant Bouton est suffisamment contrasté en thème clair. Au survol, le texte des boutons secondaires et tertiaires est insuffisamment contrasté.
Bouton primaire
| État | Thème clair | Thème sombre |
|---|---|---|
| par défaut | 14,9:1 | 4,7:1 |
| au survol | 8,2:1 | 7,5:1 |
| désactivé | 2,47:1 | 2,5:1 |
Bouton secondaire et tertiaire
| État | Thème clair | Thème sombre |
|---|---|---|
| par défaut | 14,9:1 | 5,8:1 |
| au survol | 13,8:1 | 4,1:1 |
| désactivé | 3,1:1 | 3,2:1 |
Bouton ou lien ?
Éviter d’utiliser le style du composant Bouton sur les liens et inversement.
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 : « non disponible »
- Narrateur et Talkback : « désactivé »
Les tests de restitution ont été effectués en ajoutant le lecteur d’écran intégré à Windows 11 (Narrateur) et le navigateur web Chrome à l’environnement de tests du RGAA.
Versions des navigateurs web :
- Firefox 137
- Chrome 135
- Safari 18.4 (sur macOS uniquement)
- Microsoft Edge 135 (sur Windows 11 uniquement)
Version des lecteurs d’écran :
- NVDA 2024.4.2
- JAWS 2024
- VoiceOver macOS 15.4
- Narrateur (Windows 11)
- VoiceOver iOS
Critères RGAA applicables
- Couleurs : 3.2, 3.3
- Scripts : 7.1, 7.3
- Présentation de l’information : 10.1, 10.2, 10.4, 10.5, 10.7, 10.11, 10.12
- Formulaires : 11.9
- Navigation : 12.8, 12.9
- Consultation : 13.9, 13.11