Critère WCAG 2.4.7 : garantir un focus visible pour tous

Ce qu'impose le critère 2.4.7

Le succès critique 2.4.7, de niveau AA, demande que toute interface utilisable au clavier dispose d'un mode où l'indicateur de focus est visible. Cela ne concerne pas un simple polish esthétique : c'est une condition pour que les utilisateurs puissent situer l'élément actif à chaque instant. Le critère est lié au 2.4.3 (ordre de tabulation) qui définit le parcours, et au 2.1.1 (clavier) qui rend l'interaction possible. Le focus doit être permanent pendant la navigation et ne doit jamais être supprimé dynamiquement.

Le piège du outline: none en CSS

L'erreur la plus fréquente consiste à supprimer l'indicateur natif du navigateur via outline: none ou outline: 0 en CSS sans proposer d'alternative. Cela casse l'accessibilité pour tous les utilisateurs clavier. Vous pouvez remplacer l'indicateur natif, à condition que la solution alternative soit aussi visible. Le critère 1.4.11 (Contraste non textuel) impose que cet indicateur ait un contraste de 3:1 avec le fond environnant pour rester perceptible aux personnes malvoyantes.

Concevoir un focus visible pour tous les états

La pseudo-classe CSS :focus-visible est aujourd'hui la bonne pratique. Contrairement à :focus qui s'active aussi au clic souris (souvent intrusif visuellement), :focus-visible utilise des heuristiques du navigateur pour n'afficher l'indicateur que lorsque l'utilisateur en a besoin, généralement lors de la navigation clavier. Pour les navigateurs anciens, @supports selector(:focus-visible) permet un style de repli via :focus sans dégradation progressive.

Tester le focus visible au clavier seul

Le test manuel est incontournable : posez la souris de côté, parcourez toute la page uniquement avec Tab pour avancer et Maj+Tab pour reculer. À chaque arrêt, devez-vous identifier précisément l'élément focalisé ? L'indicateur doit être ininterrompu, épais (au moins 2 pixels), bien différencié du fond, et toujours visible. Complétez par NVDA ou VoiceOver pour confirmer que l'élément focalisé est annoncé correctement en complément du repère visuel.

Focus visible et design system

L'approche la plus robuste consiste à standardiser l'indicateur de focus dans votre design system via des tokens CSS dédiés. En appliquant ces tokens sur chaque composant interactif (boutons, inputs, cards cliquables), vous garantissez la cohérence sur l'ensemble du site sans dépendre de la vigilance individuelle de chaque développeur. C'est aussi la garantie de ne pas régresser à chaque nouvelle fonctionnalité.

Questions fréquentes

Qu'est-ce qu'un focus visible concrètement ?

C'est un récepteur visuel (contour, outline, changement de fond) qui indique précisément sur quel élément de l'interface se trouve l'utilisateur navigant au clavier. Sans lui, la navigation au clavier est inutilisable.

Comment tester efficacement le focus visible ?

Débranchez la souris. Naviguez sur votre site uniquement avec Tab pour avancer et Maj+Tab pour reculer. Si vous perdez la trace de votre position ou ne voyez plus où vous êtes, votre site échoue au critère 2.4.7.

:focus-visible suffit-il ?

Oui, c'est la norme actuelle recommandée. Elle concilie accessibilité clavier et confort UX pour la souris, en évitant d'afficher un contour inutile quand l'utilisateur clique. Combinée à :focus en repli via @supports, elle couvre l'ensemble des navigateurs.

Le focus visible peut-il être personnalisé ?

Absolument. Vous n'êtes pas obligés de garder l'outline natif du navigateur. Vous pouvez créer des designs personnalisés (contour coloré, soulignement, fond contrasté), tant que le contraste respecte 1.4.11 et que l'indicateur reste perceptible.

L'EAA privé impose-t-elle des exigences spécifiques ?

Depuis le 28 juin 2025, l'EAA impose le niveau WCAG 2.1 AA aux services numériques privés éligibles. Le critère 2.4.7 en fait partie. Le non-respect est sanctionné par la DGCCRF avec une amende de 7 500 € pour un premier manquement et 15 000 € en cas de récidive.

Le focus visible concerne-t-il aussi les écrans tactiles ?

Le critère 2.4.7 vise la navigation clavier. Sur mobile, le focus virtuel n'est pas exposé de la même manière, mais les composants tactiles doivent toujours être utilisables au focus clavier (par exemple via Bluetooth ou switch control), donc l'indicateur reste pertinent.