RGAA 10.7 — Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?

Indicateur de focus invisible

Le problème

L'indicateur de focus est le repère visuel qui montre quel élément de la page est actuellement sélectionné au clavier. Le critère 10.7 du RGAA exige que la prise de focus soit visible pour chaque élément interactif. Sans indicateur de focus visible, naviguer au clavier revient à conduire de nuit sans phares : l'utilisateur ne sait pas où il se trouve dans la page. La ligne CSS « outline: none » ou « outline: 0 » est la cause numéro un de ce problème. De nombreux développeurs et designers suppriment le contour de focus par défaut du navigateur car ils le trouvent « laid » — sans le remplacer par un indicateur alternatif visible. Le résultat : quand l'utilisateur appuie sur Tab, il ne voit rien se passer visuellement même si le focus se déplace bien d'un élément à l'autre en coulisse. D'autres causes fréquentes incluent : un indicateur de focus dont la couleur est trop proche de l'arrière-plan (un outline bleu sur un fond bleu), un indicateur trop fin ou trop petit pour être perceptible, ou un indicateur masqué par un overflow:hidden sur un élément parent. Certains frameworks CSS (Bootstrap, Tailwind, Material UI) incluaient historiquement des resets CSS qui supprimaient le focus outline. Les versions récentes ont corrigé ce problème, mais les anciens sites utilisant ces frameworks peuvent encore être affectés. La bonne pratique est de ne jamais supprimer le focus outline sans fournir une alternative visible au moins aussi discernable. Les WCAG 2.2 (critère 2.4.13) ont renforcé les exigences : l'indicateur de focus doit avoir une taille minimum et un contraste suffisant avec l'arrière-plan pour être clairement perceptible.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Impact sur les utilisateurs

Pour un utilisateur clavier, l'absence d'indicateur de focus rend la navigation chaotique. Il appuie sur Tab et ne sait pas sur quel lien, bouton ou champ il se trouve. Il doit appuyer sur Entrée « à l'aveugle » pour voir ce qui se passe. Il peut activer un lien involontairement, soumettre un formulaire avant d'avoir fini de le remplir, ou passer à côté d'une fonctionnalité essentielle sans la voir. Les personnes malvoyantes qui utilisent le clavier en complément d'un agrandisseur d'écran sont particulièrement affectées. Avec un zoom à 200% ou plus, seule une petite portion de la page est visible à l'écran : si l'indicateur de focus est absent ou peu visible, l'utilisateur perd complètement la trace de sa position dans la page. Les personnes ayant des troubles cognitifs ou attentionnels bénéficient aussi de l'indicateur de focus pour maintenir leur attention sur l'élément courant. Son absence augmente la charge cognitive et rend l'interaction plus fatigante et sujette aux erreurs.

Exemple de code

Avant (non conforme)
/* Reset CSS qui supprime le focus */
*:focus {
  outline: none;
}

a:focus,
button:focus,
input:focus {
  outline: 0;
  box-shadow: none;
}
Après (conforme)
/* Focus visible avec indicateur clair */
*:focus-visible {
  outline: 3px solid #4f46e5;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Optionnel : supprimer outline uniquement au clic souris */
*:focus:not(:focus-visible) {
  outline: none;
}

Questions fréquentes

Peut-on personnaliser l'apparence de l'indicateur de focus ?
Oui, et c'est même recommandé. L'outline par défaut du navigateur est un bon filet de sécurité, mais vous pouvez le remplacer par un style personnalisé qui s'intègre mieux à votre charte graphique. Utilisez :focus-visible en CSS pour appliquer un outline, un box-shadow ou un changement de couleur de fond. L'essentiel est que l'indicateur soit clairement visible et suffisamment contrasté.
Quelle est la différence entre :focus et :focus-visible ?
La pseudo-classe :focus s'applique chaque fois qu'un élément reçoit le focus, y compris au clic souris. :focus-visible ne s'applique que quand le navigateur détermine que l'indicateur de focus devrait être visible — typiquement lors de la navigation clavier. Cela permet de montrer le focus uniquement quand c'est nécessaire, sans l'afficher lors des clics souris.
L'indicateur de focus doit-il avoir un contraste minimum ?
Oui. Les WCAG 2.2 (critère 2.4.13, niveau AAA) exigent que l'indicateur de focus ait un ratio de contraste d'au moins 3:1 avec les couleurs adjacentes et une taille minimale de 2px d'épaisseur sur tout le périmètre de l'élément. Le RGAA reprend ces principes : l'indicateur doit être suffisamment visible dans tous les contextes.
Comment tester la visibilité du focus sur mon site ?
Naviguez sur votre site en utilisant uniquement la touche Tab. Vous devez voir à chaque instant quel élément a le focus. Si le focus « disparaît » visuellement à un endroit, inspectez le CSS de cet élément dans les DevTools et cherchez des règles outline:none ou outline:0 qui suppriment l'indicateur. Scrutia signale automatiquement les éléments dont le focus n'est pas visible.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit