Aller au contenu principal
Mynto
AccessibiliteRGAA 10.7Niveau AAPrésentation de l'information

Prise de focus non visible au clavier

Quand on navigue au clavier, chaque élément interactif doit afficher un indicateur visible au moment où il reçoit le focus. C'est le critère RGAA 10.7, niveau AA. Sans lui, l'utilisateur clavier est aveugle à sa position sur la page.

C'est quoi

La prise de focus désigne le moment où un élément interactif - lien, bouton, champ de formulaire - est sélectionné via la touche Tab ou les flèches du clavier.

Par défaut, les navigateurs affichent un contour visuel sur l'élément focusé (un "outline"). Ce contour est souvent supprimé pour des raisons esthétiques avec une règle CSS :focus { outline: none; }, ce qui est la cause la plus fréquente de l'erreur. D'autres causes existent : indicateur masqué par un en-tête fixe, ou contraste trop faible du contour.

Le critère RGAA 10.7 exige que ce signal visuel soit présent et perceptible. Il correspond au critère WCAG 2.4.7 (Focus Visible), niveau AA.

Qui est touché

  • Les personnes qui naviguent exclusivement au clavier : utilisateurs avec troubles moteurs, utilisateurs de technologies d'assistance, utilisateurs avancés.
  • Les personnes malvoyantes qui utilisent le clavier plutôt que la souris.
  • Les personnes ayant des troubles cognitifs qui s'appuient sur le repère visuel pour suivre leur position dans la page.

Impact business

Sans focus visible, l'utilisateur clavier ne sait plus où il se trouve dans la page. Il ne peut pas remplir un formulaire, activer un lien, ni interagir avec un composant. La navigation devient impossible dès le premier élément sans indicateur.

C'est l'une des erreurs d'accessibilité les plus courantes : le rapport WebAIM Million la relève régulièrement parmi les problèmes les plus fréquents sur les pages d'accueil analysées.

L'impact est direct et bloquant. Chaque composant sans focus visible est une barrière concrète pour l'utilisateur clavier.

Sources des chiffres

Comment le détecter

  • Audit Mynto : le scan repère les suppressions d'outline les plus courantes dans le CSS. La validation complète du critère 10.7 reste un test manuel au clavier.
  • Test manuel : ouvre la page, débranche la souris, navigue avec Tab. Vérifie qu'un contour ou un signal visuel apparaît sur chaque lien, bouton et champ.
  • DevTools : inspecte les styles :focus et :focus-visible des éléments interactifs. Cherche les outline: none ou outline: 0.
  • Extension : axe DevTools ou Wave signalent les composants sans focus visible.

Comment corriger

Avant - CSS
/* Supprime le focus sur tous les éléments - erreur classique */
*:focus {
  outline: none;
}
Après - CSS
/* Réinitialise l'erreur */
*:focus {
  outline: revert;
}

/* Focus visible, contour contrasté - adapter la couleur au fond du thème */
*:focus-visible {
  outline: 3px solid #0056b3;
  outline-offset: 2px;
  border-radius: 2px;
}

La correction consiste à ne jamais supprimer l'outline sans le remplacer par un indicateur équivalent.

Préfère :focus-visible à :focus : il n'affiche le contour qu'en navigation clavier, pas au clic souris, ce que les navigateurs modernes gèrent nativement.

Si tu dois supprimer l'outline par défaut pour des raisons de design, remplace-le immédiatement dans la même règle :

  • outline avec une couleur contrastée
  • ou box-shadow si l'outline ne convient pas
  • ou un changement de background-color / border suffisamment perceptible

L'indicateur de focus doit lui-même avoir un contraste d'au moins 3:1 avec l'arrière-plan (critère WCAG 1.4.11). Un contour gris pâle qui passe inaperçu ne suffit pas.

Sur WordPress avec un thème bloc ou un constructeur de page, vérifie le fichier CSS global et les styles inline des composants. Certains thèmes premium suppriment le focus dans leur reset CSS.

Questions fréquentes

Peut-on remplacer l'outline par un box-shadow ?

Oui, à condition que le remplacement soit suffisamment visible. Un box-shadow peut convenir si son contraste est adéquat. L'essentiel est qu'un signal visuel clair indique le focus, quelle que soit sa forme.

Quelle est la différence entre :focus et :focus-visible ?

:focus s'active à chaque prise de focus, y compris au clic souris. :focus-visible s'active uniquement quand le navigateur juge qu'un indicateur est utile, typiquement en navigation clavier. Utiliser :focus-visible donne un résultat propre visuellement sans pénaliser les utilisateurs clavier.

Mon thème WordPress supprime le focus dans son reset CSS. Comment corriger ?

Ajoute une feuille de style enfant ou un CSS personnalisé via l'éditeur de thème. Déclare une règle *:focus-visible après le reset du thème pour la surcharger. Vérifie aussi les plugins de page builder qui peuvent injecter leurs propres styles.

RGAA 10.7 et WCAG 2.4.7 sont-ils identiques ?

Ils couvrent le même besoin. WCAG 2.4.7 Focus Visible (niveau AA) est la référence internationale, RGAA 10.7 en est la déclinaison française. Respecter l'un revient à respecter l'autre sur ce point.

À lire aussi

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.