Focus visible : tester une page au clavier

Ce que demande le critère 10.7

Le critère 10.7 du RGAA 4.1.2 demande que, dans chaque page, la prise de focus soit visible pour chaque élément qui la reçoit. Son test 10.7.1 est validé si le style du focus natif du navigateur n’est pas supprimé ou dégradé, ou si un style défini par l’auteur est visible. La méthodologie précise ce qu’est « visible » : une indication sur le contour, le fond ou les deux, avec un rapport de contraste de 3:1 au moins.

Le critère correspond au 2.4.7 des WCAG 2.1, de niveau AA. Pour le contraste de l’indicateur, les WCAG renvoient au critère 1.4.11, qui demande 3:1 ; le RGAA pose le même seuil dans son critère 3.3 pour un composant d’interface dans ses différents états.

Comment l’outil parcourt la page

Notre moteur ouvre la page dans Chromium, sur un écran de 1280 × 800 px, ferme le bandeau de cookies s’il le reconnaît, puis note le style de chaque lien, bouton, champ et élément doté d’un tabindex positif ou nul. Il presse ensuite la touche Tab, autant de fois qu’il a compté d’éléments plus cinq, 60 fois au plus, et s’arrête quand le focus revient sur un élément déjà vu. Les liens d’un cadre intégré consomment ces tabulations sans être jugés. Le résultat dit si le parcours a fait le tour de la page ou s’est arrêté à la limite.

La vraie touche compte : le navigateur n’applique la pseudo-classe :focus-visible que lorsqu’il juge l’indicateur utile, ce qui est le cas au clavier. Un focus donné par script, sans touche, ferait conclure à tort qu’un site soigné n’a pas de focus.

À chaque arrêt, l’élément est comparé à son état de repos : contour, ombre portée, fond, bordure, soulignement, couleur du texte, transformation, filtre. Un contour seul doit contraster à 3:1 avec la couleur du premier parent qui a un fond.

Trois niveaux de certitude

Défaut : un script retire le focus à l’élément au moment où il le reçoit. La position du clavier se perd, il n’y a rien à interpréter.

Défaut probable : rien ne change sur l’élément lui-même. C’est le plus souvent un focus invisible, avec trois exceptions que la mesure ne voit pas : le cadre d’une carte entière cliquable, dessiné sur un parent avec :focus-within ; un indicateur fait d’un pseudo-élément ; un changement animé par une transition CSS, mesuré avant qu’il ait eu lieu. Les cartes d’actualité du site du système de design de l’État et le champ de recherche de Wikipédia sortent ainsi, alors que leur focus se voit bien.

À vérifier : un contour apparaît, mais contraste à moins de 3:1 avec le fond mesuré. Le fond réel peut être une image ou un dégradé que la mesure ignore, et l’anneau natif du navigateur, bicolore, n’est mesuré que sur l’une de ses couleurs.

Corriger un focus invisible

La cause la plus courante est une règle outline: none posée sur tous les liens et boutons, que les WCAG classent en échec F78. Gardez le contour natif, ou remplacez-le par un style réservé au clavier :

:focus-visible {
  outline: 3px solid #1d1d1b;
  outline-offset: 2px;
}

Choisissez une couleur qui contraste à 3:1 avec chaque fond du site, et testez-la avec le contrast checker.

L’ordre de tabulation et les contenus ouverts

Le relevé suit l’ordre réel de la touche Tab. Il ne dit pas si cet ordre est cohérent : le critère 12.8 le fait vérifier en parcourant la page avec Tab puis Maj+Tab, et rappelle que la tabulation n’a pas à suivre l’ordre de lecture tant qu’elle reste cohérente. Son test 12.8.2 porte sur les contenus insérés par script : après l’ouverture d’un panneau, le focus doit être replacé correctement.

Le critère 12.11 demande que les contenus qui apparaissent au survol, au focus ou à l’activation, une infobulle qui contient un lien par exemple, soient atteignables au clavier. L’outil ne clique sur rien : ouvrez vous-même menus, fenêtres et accordéons, et vérifiez le focus à l’intérieur.

Sources

RGAA 4.1.2, critère 10.7 (prise de focus visible) ; RGAA 4.1.2, critère 12.8 (ordre de tabulation cohérent) ; RGAA 4.1.2, critère 12.9 (piège au clavier) ; RGAA 4.1.2, critère 12.11 (contenus additionnels atteignables au clavier) ; RGAA 4.1.2, critère 3.3 (contraste des composants d’interface) ; RGAA 4.1.2, glossaire : Prise de focus ; WCAG 2.1, critère de succès 2.4.7 Focus Visible, en anglais ; Comprendre le critère 2.4.7 des WCAG 2.1, en anglais ; WCAG 2.1, critère de succès 1.4.11 Non-text Contrast, en anglais ; Échec F78 des WCAG : indicateur de focus supprimé par le style, en anglais ; Échec F55 des WCAG : focus retiré par script dès sa réception, en anglais ; MDN : la pseudo-classe :focus-visible .

Page mise à jour le 11 novembre 2026.