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

Comment corriger : trois écritures CSS

Les trois écritures ci-dessous produisent des résultats très différents. La première casse le critère, la deuxième le passe, la troisième le passe sans abîmer le rendu à la souris.

*:focus {
  outline: none;
}

:focus {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
/* neutralise l'anneau souris hérité */
:focus:not(:focus-visible) {
  outline: none;
}

:focus ou :focus-visible ? :focus se déclenche quel que soit le moyen d'activation — clavier ET souris. C'est lui qui fait râler les équipes design, car cliquer sur un bouton laisse un contour. :focus-visible applique une heuristique du navigateur : il ne s'active que lorsque l'indicateur est utile, c'est-à-dire à la navigation clavier. En pratique, stylez le focus avec :focus-visible et laissez la souris tranquille. Support : tous les navigateurs modernes depuis 2022 ; pour les vieux navigateurs, :focus sert de repli.

Décliner le focus par type d'élément

La règle :focus-visible ci-dessus couvre le cas général. En pratique, un lien, un bouton, un champ et un composant sur-mesure n'appellent pas le même traitement : voici la déclinaison par type d'élément.

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

button:focus-visible {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 3px #ffdd00,
              0 0 0 6px #0b0c0c;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 0;
  border-color: #1d4ed8;
}

[role="button"][tabindex="0"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

Référence : GOV.UK Design System — focus states

Contraste de l'indicateur : les chiffres

L'indicateur doit non seulement exister, mais se détacher du fond. Le repère mesurable est 3:1 entre l'indicateur et le fond adjacent. Voici quatre couples de couleurs, avec le ratio calculé selon la formule de luminance relative WCAG (le vérificateur de contraste du site fait ce calcul pour vous) :

Vérifier un ratio de contraste avec notre outil →

Tester le focus visible en 5 étapes

1. Inventorier les éléments focusables : liens, boutons, champs de formulaire, plus tout élément portant tabindex="0" ou un rôle ARIA interactif. Les tabindex="-1" sortent du parcours de tabulation.
2. Naviguer uniquement au clavier : Tab pour avancer, Maj+Tab pour reculer, sans jamais toucher la souris.
3. Vérifier qu'à chaque arrêt un indicateur visible entoure l'élément : contour (outline), ombre (box-shadow) ou changement de fond net.
4. Mesurer le contraste de l'indicateur contre le fond adjacent et viser au moins 3:1. Le vérificateur de contraste évite le calcul à la main.
5. Rejouer le parcours sur les composants sur-mesure (menus déroulants, onglets, modales) : c'est là que le reset CSS a le plus souvent effacé l'outline.

Cas particuliers qui piègent

tabindex="0" sur un élément non natif

Un <div tabindex="0" role="button"> entre dans le parcours clavier : il doit recevoir un style de focus explicite. Le navigateur ne dessine pas toujours d'anneau par défaut sur les éléments non natifs — à vous de l'ajouter.

tabindex="-1"

Retiré de la tabulation, donc hors périmètre du 10.7 pour la navigation Tab. Mais s'il reçoit le focus par script (ex. le titre d'une modale qu'on ouvre), l'indicateur redevient exigible à ce moment-là.

box-shadow comme indicateur

Un box-shadow: 0 0 0 3px #1d4ed8 est parfaitement valide, souvent plus propre qu'un outline car il épouse le border-radius. Il doit lui aussi atteindre 3:1 contre le fond.

Changement de fond seul

Ne modifier que la couleur de fond au focus peut suffire, à condition que le contraste entre l'état normal et l'état focus atteigne 3:1. Un assombrissement discret ne passe pas.

Correspondance WCAG, EN 301 549 et EAA

Le RGAA 10.7 est l'équivalent français du critère WCAG 2.4.7 « Focus Visible ». Détail qui compte : le RGAA le classe niveau A (exigé dès le socle minimal), là où WCAG le place en AA. L'énoncé du 10.7 n'inscrit pas de chiffre, mais sa méthode de test et les critères WCAG voisins (2.4.11 Focus non masqué, 2.4.13 Focus Appearance) fixent le repère mesurable à 3:1. Côté européen, l'European Accessibility Act (directive 2019/882, applicable depuis le 28 juin 2025) renvoie à la norme EN 301 549, dont la clause 9.2.4.7 reprend mot pour mot WCAG 2.4.7. En clair : corriger le 10.7 vous met en règle RGAA, WCAG et EAA d'un seul geste.

Questions fréquentes

Un box-shadow peut-il remplacer l'outline pour signaler le focus ?

Oui. Un box-shadow: 0 0 0 3px suit le border-radius et rend souvent mieux qu'un outline. Il doit atteindre le même repère de contraste de 3:1 contre le fond adjacent.

Comment auditer le focus visible sur tout un site ?

Naviguez au clavier (Tab / Maj+Tab) sur chaque gabarit et vérifiez l'indicateur à chaque arrêt. Pour dégrossir, notre scanner repère les outline:none non compensés dans les styles en ligne ; l'inspection fine reste manuelle sur les composants sur-mesure.

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

:focus s'active au clavier comme à la souris ; :focus-visible ne s'active qu'au clavier. Utilisez :focus-visible pour afficher l'anneau seulement quand il sert, sans laisser de contour au clic souris.

Le RGAA impose-t-il vraiment un ratio de 3:1 pour le focus ?

L'énoncé du 10.7 parle de focus « visible » sans chiffre. Le repère de 3:1 vient de la méthode de test et des critères WCAG associés. En audit, un indicateur sous 3:1 est régulièrement considéré comme insuffisamment perceptible.

Changer seulement la couleur de fond au focus suffit-il ?

Oui si le contraste entre l'état normal et l'état focus atteint 3:1. Un simple survol assombri de quelques pourcents ne passe pas : l'écart doit être franc et mesurable.

RGAA 10.7 et WCAG 2.4.7, c'est la même chose ?

Même exigence de fond. Nuance : le RGAA classe le 10.7 en niveau A, WCAG classe 2.4.7 en AA. Corriger l'un corrige l'autre, plus la clause 9.2.4.7 de l'EN 301 549 visée par l'EAA.

Aller plus loin

• Vérifier un ratio de contraste
• Contrastes de couleurs et accessibilité
• Navigation clavier et accessibilité
• Guide ARIA