Pourquoi utiliser :focus-visible plutôt que :focus en CSS ?

:focus s’affiche à chaque fois que l’élément a le focus (y compris au clic souris), ce qui peut créer un « flash » disgracieux. :focus-visible ne s’affiche que lorsque le focus est obtenu au clavier (tabulation), ce qui améliore l’UX tout en gardant l’accessibilité pour les utilisateurs clavier. C’est la recommandation WCAG moderne.

Peut-on enlever le contour de focus (outline) pour le design ?

Non sans le remplacer. outline: none seul est une non-conformité WCAG car les utilisateurs au clavier ne voient plus où ils sont. Il faut fournir une alternative visible : bordure, box-shadow, ou changement de couleur avec un contraste d’au moins 3:1. Utilisez :focus-visible pour n’appliquer ce style qu’au focus clavier.

Le focus visible est-il obligatoire pour l’accessibilité ?

Oui. WCAG exige que le focus clavier soit visible (critère 2.4.7). Sans indicateur de focus, les utilisateurs qui naviguent au clavier ne savent pas quel élément est actif. C’est un critère d’échec en audit. Tous les éléments interactifs (liens, boutons, champs) doivent avoir un focus visible.

Qu'est-ce que Focus visible ?

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).

Comment ça marche ?

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'Impact Business

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.

Bonnes pratiques vs Erreurs communes

✅ À faire : 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.
❌ À éviter : 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).

Prompt IA

Contexte : design system [couleur primaire, fond], composants [liens, boutons, champs]. Génère un extrait CSS pour :focus-visible (outline ou border + box-shadow) avec un contraste d’au moins 3:1. Donne une variante pour les liens et une pour les boutons. Explique :focus vs :focus-visible et pourquoi ne pas utiliser outline: none sans remplacement. Inclus un fallback pour les navigateurs anciens si besoin.