Focus visible

Ce que ce critère exige

Chaque fois qu’un élément interactif reçoit le focus clavier, le navigateur — ou le CSS de la page — doit afficher un indicateur visible montrant quel élément est focalisé. Le critère ne prescrit pas l’apparence de cet indicateur ; c’est le rôle du critère 2.4.13 au niveau AAA. Il exige seulement que quelque chose soit visible. L’échec classique est *:focus { outline: none; } sans remplacement.

Ce critère s’applique à tout élément focalisable : liens, boutons, champs de formulaire, composants personnalisés, iframes, tout ce qui possède un tabindex. Il s’applique que l’utilisateur soit arrivé via Tab, Maj+Tab, ou un appel programmatique au focus.

Comment satisfaire ce critère

• Ne jamais écrire outline: none (ou outline: 0) sans remplacement immédiat. Utiliser :focus-visible pour limiter l’anneau personnalisé aux utilisateurs au clavier uniquement, si l’on souhaite le supprimer au clic souris.
• Fournir un style de focus suffisamment contrasté et épais pour être évident : un anneau plein de 2px avec un rapport de contraste de 3:1 par rapport à l’arrière-plan adjacent constitue la base conservative.
• Pour les éléments clairs sur fond clair, utiliser un anneau sombre (ou inversement). Un anneau gris sur un état de survol gris est le piège classique d’invisibilité.
• Les composants personnalisés (combobox, listbox, menu) doivent déplacer le focus sur l’option active et afficher un indicateur visible sur celle-ci.
• Tester en parcourant toute la page au Tab depuis la barre d’URL. Chaque arrêt doit être évident sans plisser les yeux.

Échecs courants

• Réinitialisation globale : *:focus { outline: none; } dans le CSS de base, jamais rétabli.
• Bibliothèques de composants livrant un anneau de 1px à faible contraste correspondant à la couleur de marque sur un dégradé hero — invisible en pratique.
• Indicateur de focus masqué derrière un en-tête fixe lors du défilement (voir le critère 2.4.11 — même cause racine, critère différent).
• Des boutons qui changent de couleur d’arrière-plan au :hover mais pas au :focus, laissant les utilisateurs au clavier sans aucun signal.
• Des listes déroulantes personnalisées où le focus se déplace vers un <li> masqué hors écran sans aucun changement visuel.
• Des designers remplaçant l’anneau par une légère ombre invisible sur des arrière-plans chargés.

Comment :focus-visible s’intègre

Les navigateurs exposent :focus-visible pour distinguer le focus clavier du focus souris. Schéma :

:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Cela maintient les clics souris sans anneau tout en donnant un indicateur aux utilisateurs au clavier. Compatible avec tous les navigateurs modernes depuis 2026.

Pourquoi ce critère est important

Focus Visible est le critère le plus cité dans les audits d’accessibilité clavier — et sans doute celui avec le plus fort impact. Un site qui échoue au critère 2.4.7 est inutilisable au clavier, même si tous les autres critères sont satisfaits. Les utilisateurs souffrant de troubles moteurs, les utilisateurs malvoyants utilisant des loupes, et les utilisateurs blessés à la main perdent tous accès. Les utilisateurs de claviers mobiles (claviers Bluetooth externes sur tablettes) se heurtent au même obstacle. La correction est généralement une seule règle CSS, ce qui rend la persistance de cet échec sur le web d’autant plus remarquable.