12.1. Garantir la visibilité de la prise de focus au clavier
La visibilité du focus au clavier est définie par la propriété CSS outline. Elle ne doit pas être dégradée par rapport au style de focus natif du navigateur.
En particulier, toutes les propriétés qui suppriment ou réduisent la visibilité du focus (par exemple les propriétés outline: none; et outline: 0; appliquées en CSS sur tous les éléments interactifs) sont à supprimer.
Chaque élément interactif (liens, boutons, champs de formulaires, etc.) doit être visuellement mis en avant lors de la prise de focus, afin de permettre aux personnes qui naviguent au clavier de se situer dans la page.
Remarque
Veiller à ce que cette mise en avant visuelle soit suffisamment contrastée.
Nous recommandons fortement de ne pas personnaliser la visibilité du focus au clavier, afin de laisser le style par défaut du navigateur qui est suffisamment contrasté dans la très grande majorité des cas.
L’utilisation de la propriété CSS box-shadow pour personnaliser la visibilité du focus au clavier est fortement déconseillée, car n’est pas visible en mode de contraste élevé, contrairement à la propriété outline.
Astuce
Une très bonne pratique d’accessibilité consiste à doubler systématiquement chaque règle :hover par une règle :focus dans la CSS.
Comme par exemple :
main a:hover,
main a:focus {
text-decoration: none;
}
2 commentaires
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
Bonjour,
Si j’ai un bouton avec une bordure de couleur, et qu’au survol / à la prise du focus je change la couleur de la bordure (avec un contraste suffisant entre les deux couleurs), est-ce que c’est correct ?
Ne risque-t-on pas que certains utilisateurs ne perçoivent pas ce changement ? Pour une information dans la page, il est interdit de véhiculer une information uniquement par la couleur, même suffisamment contrasté.-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
Bonjour Cédric,
A priori, d’après vos explications, cela est ok/conforme pour l’accessibilité.
Ce cas est-il toutefois visible quelque part pour que nous puissions concrètement le vérifier ?Quoi qu’il en soit, dans tous les cas de figure, il est important de ne pas supprimer ou dégrader l’indication visuelle du navigateur (propriétés CSS outline). Cf. critère 10.7 du RGAA.
Johan
-
