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é et visible sauf cas particulier. De plus, ce style est réalisé avec la classe CSS :focus-visible, limitant l’affichage du focus uniquement aux utilisateurs clavier.

L’utilisation de la propriété CSS box-shadow pour personnaliser la visibilité du focus au clavier est fortement déconseillée, car elle 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

Par Cédric Escarment, le 23 mars 2017 à 14h18.

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é.

Répondre
- Par Johan Ramon, le 27 mars 2017 à 10h19.
  
  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
  
  Répondre

Ajouter un commentaire

Mises à jour

20/08/2024: Modification de l’encart « Remarque ».

Haut de page