Le texte du bouton d'état du survol doit-il respecter les directives d'accessibilité?
J'ai une compréhension de base de l'accessibilité et de la façon dont elle s'applique aux éléments visuels de votre produit et je souhaite appliquer les directives du mieux que je peux.
Ma question est la suivante: le texte du bouton d'état du survol doit-il également respecter les directives d'accessibilité ainsi que l'état normal?
Prenons l'exemple d'une ligne de tableau qui est mise en surbrillance lors du survol de la souris. Comme mentionné par Sooraj MV, WCAG applique un rapport de contraste de 4,5: 1 minimum pour un niveau d'accessibilité AA.
OK, mais vous pouvez affirmer que le contraste des couleurs est bon lorsque vous ne passez pas la souris sur l'élément/ne le faites pas. Le problème est que certaines personnes malvoyantes utiliseront une loupe d'écran, et par exemple pour lire la ligne du tableau, leur souris sera forcément en vol stationnaire. Cela signifie que chaque fois qu'ils liront une ligne, ils déclencheront l'interaction en survol, rendant un bon contraste de couleur devient obligatoire dans ce cas.
Pour le contraste d'un élément focalisé, le problème semble moins évident, mais les utilisateurs se concentrent généralement sur un élément (c'est-à-dire un bouton) juste avant de déclencher l'interaction. S'ils ne peuvent pas lire ce qui est ciblé, comment sont-ils censés savoir quelle est l'action? Ils auraient besoin d'aller et venir. Évidemment, ce n'est pas une bonne expérience utilisateur.
N'oubliez pas que les directives d'accessibilité sont là pour vous aider à concevoir des sites Web accessibles. En fin de compte, la seule chose qui indique si elle est accessible ou non est un test utilisateur. Et vous pouvez fournir une très mauvaise expérience utilisateur tout en respectant WCAG AA ... Priorisez les commentaires des utilisateurs sur les directives
Oui bien sûr. WCAG 2.0 version 1.4.3 n'a rien mentionné de spécifique concernant le changement de couleur pour le texte des boutons sur les états de survol/focus. Il est sûr de supposer que le texte du bouton sur les états de vol stationnaire/de mise au point doit conserver un rapport de contraste de 4,5: 1 ou plus pour passer le niveau de conformité AA des WCAG 2.0. Plus d'informations peuvent être trouvées ici: https://webaim.org/articles/contrast/
Si vous recherchez des directives d'accessibilité pour le contenu sur les états de focus/survol en général, elles sont clairement expliquées dans la dernière version de la version WCAG 2.1 2018 dans le critère de succès 1.4.13 https://www.w3.org/ WAI/WCAG21/Comprendre/content-on-hover-or-focus.html
Tout d'abord, nous espérons que votre état de survol est également indiqué avec la mise au point du clavier. (Utilisez simplement :hover et :focus dans la même définition de style).
Que le bouton soit mis au point, survolé ou non, le texte du bouton doit présenter un contraste suffisant avec sa couleur d'arrière-plan. Si ce n'est pas le cas, le texte peut disparaître lorsqu'il reçoit le focus/survol et vous ne savez pas si vous devez sélectionner le bouton car vous ne pouvez pas voir le texte.
Notez, cependant, que 1.4.11 indique que la couleur de mise au point ou la couleur de survol n'a pas besoin d'un contraste suffisant avec l'état par défaut. Autrement dit, si l'arrière-plan de votre bouton change légèrement entre le survol et l'état par défaut, cette différence de couleur n'a pas d'exigence de contraste.
Vous décrivez une façon de penser l'accessibilité qui est assez courante.
Supposons qu'il s'agisse d'un formulaire de contact et posons ces questions:
- Le survol doit-il être accessible ou le bouton entier?
- Le bouton doit-il être accessible ou comment envoyer le formulaire?
- Le formulaire doit-il être accessible ou simplement le fait que les gens puissent vous contacter?
Vous avez peut-être du mal à rendre un formulaire de contact accessible aux personnes handicapées, puis découvrez qu'elles préfèrent passer un appel. Le simple fait d'ajouter un numéro de téléphone sur la page permet à ces personnes de vous contacter beaucoup plus facilement. Bien que ce ne soit qu'un exemple, j'espère que cela clarifie un point. Tous les utilisateurs sont-ils capables de comprendre ce que fait le bouton et comment il se comporte dans le contexte du formulaire?
Concentrez-vous sur le bouton dans son intégralité, pas seulement sur l'état de survol, et voyez si et comment l'état de survol améliore ou diminue l'accessibilité du bouton.
L'état de survol du bouton communique-t-il des informations cruciales? Fournissez ces informations d'une manière différente. Si l'état de survol a la même fonction que l'état de focus pour les utilisateurs de clavier, il doit être rendu accessible.
Oui. L'état de survol n'est qu'un des états d'un contrôle d'interface utilisateur, donc chaque exigence est applicable.
Seul l'état désactivé (inactif) est exempté des exigences de contraste des couleurs.
Voir Critère de succès 1.4.3 Contrasstrong textt (Minimum) Incidental