États de focus accessibles : conception du focus visible du clavier
Comment concevoir un focus de clavier visible conforme à WCAG 2.2 : ce qu'exigent 2.4.7 et 2.4.13, comment fonctionne :focus-visible et des conseils de conception pour les bagues de mise au point.
À retenir
Chaque élément interactif nécessite un indicateur de mise au point clairement visible pour les utilisateurs du clavier ; WCAG 2.2 l'exige au niveau AA (2.4.7). Pour un indicateur fort, visez le guide AAA de WCAG (2.4.13) : au moins la zone d'un contour de 2 pixels CSS autour de l'élément avec un contraste de 3:1 entre les états focalisés et non focalisés. Utilisez :focus-visible pour afficher les anneaux pour les utilisateurs de clavier sans les afficher à chaque clic de souris.
Pourquoi les états de concentration sont importants
Les personnes qui utilisent un clavier, un commutateur ou une loupe d'écran se déplacent dans une page, un élément à la fois. L'indicateur de mise au point est le seul moyen pour eux de savoir où ils se trouvent. La suppression du contour du navigateur sans remplacement est l'un des échecs d'accessibilité les plus courants.
Ce que WCAG 2.2 requiert
Le critère de réussite 2.4.7 Focus Visible (niveau AA) exige que toute interface actionnable par clavier dispose d'un mode dans lequel l'indicateur de focus est visible. WCAG 2.2 a ajouté 2.4.13 Apparence de mise au point (niveau AAA), qui décrit un indicateur fort : au moins aussi grand que la zone d'un périmètre de 2 CSS pixels d'épaisseur du composant, avec un rapport de contraste d'au moins 3:1 entre les états focalisé et non focalisé.
:focus-visible
MDN explique que :focus-visible s'applique lorsqu'un élément a le focus et que le navigateur décide, à l'aide de l'heuristique, que le focus doit être affiché, généralement pour l'utilisation du clavier. Cela vous permet d'afficher des anneaux de mise au point puissants pour les utilisateurs de clavier sans les afficher à chaque fois que quelqu'un clique sur un bouton avec une souris. Utilisez-le au lieu de supprimer les contours.
Concevoir la bague
Conseils pratiques :
- Utilisez un contour ou un anneau avec un décalage afin qu'il ne se fonde pas dans l'élément.
- Vérifiez le contraste avec chaque arrière-plan sur lequel l'élément peut apparaître ; un anneau bicolore aide.
- Gardez-le cohérent entre les composants, définis comme un jeton dans votre système de conception.
- Ne comptez jamais uniquement sur un changement de couleur subtil.
- Assurez-vous que l'élément ciblé n'est pas caché derrière des en-têtes collants.
Concentration et mouvement
Une bague de mise au point peut apparaître avec une transition très courte, mais elle doit être instantanée. Évitez les animations qui retardent l'anneau ou déplacent l'élément, et pour les composants personnalisés dessinés sur le canevas, assurez-vous qu'il y a toujours un véritable élément focalisable dans la page afin que les utilisateurs du clavier puissent l'atteindre.
Principes clés à retenir
- Une mise au point visible est requise à WCAG AA (2.4.7)
- 2.4.13 (AAA) : zone de périmètre de 2 px et changement de contraste de 3 : 1
- Utilisez :focus-visible au lieu de supprimer les contours
- Définir la bague de mise au point comme un jeton de conception
- L'interface utilisateur rendue sur canevas nécessite de véritables éléments focalisables
Questions fréquentes
Sources
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — Documents Web MDN