Qu’est-ce que Focus visible ?

C'est comme allumer un voyant sur le bouton actif quand on navigue au clavier, sans l'allumer à chaque clic souris. Indication visuelle de l’élément actuellement ciblé lors de la navigation au clavier (tabulation). En CSS, :focus-visible permet d’afficher un contour (outline) ou un style spécifique lorsque le focus est obtenu au clavier, sans l’afficher au clic souris (évitant un « flash » disgracieux). Supprimer tout indicateur de focus (outline: none sans alternative) rend le site difficilement utilisable pour les utilisateurs clavier et les lecteurs d’écran ; c’est une non-conformité WCAG. Le focus doit avoir un ratio de contraste d’au moins 3:1 avec le fond. Les navigateurs appliquent un outline par défaut ; le remplacer par un style personnalisé (bordure, box-shadow) est acceptable tant que l’indication reste visible. :focus-visible est préférable à :focus pour ne pas afficher le focus au clic (meilleure UX).

En CSS, le sélecteur :focus-visible affiche un contour (outline, border ou box-shadow) uniquement lorsque le focus est obtenu au clavier (tabulation), pas au clic souris. Le navigateur applique un outline par défaut ; on peut le remplacer par un style personnalisé à condition de garder un contraste d'au moins 3:1.

L’absence de focus visible exclut les utilisateurs qui naviguent au clavier (mobilité réduite, power users) et peut constituer un critère d’échec en audit accessibilité. Un focus visible soigné (couleur, épaisseur, contraste) améliore l’UX pour tous sans dégrader l’esthétique. Les sites du secteur public ou sous obligation d’accessibilité doivent le garantir. Un outline personnalisé cohérent avec la charte graphique évite le conflit entre accessibilité et design tout en restant conforme. Les audits RGAA et WCAG sanctionnent l'absence d'indicateur de focus visible ; en parcours formulaire, corriger focus clavier et contrastes fait souvent reculer les abandons de 10 % à 25 % sur les étapes critiques — une fourchette couramment citée en CRO.

• Toujours fournir un indicateur de focus visible (bordure, box-shadow, couleur) avec un contraste d'au moins 3:1. Préférer :focus-visible à :focus pour n'afficher l'indication qu'au focus clavier. Tester la navigation à la tabulation sur tous les éléments interactifs.

• Utiliser outline: none sans alternative visible, ce qui rend le site inutilisable au clavier et non conforme WCAG. Utiliser :focus au lieu de :focus-visible et afficher le contour au clic (effet disgracieux).