:focus s’applique dès qu’un élément reçoit le focus, tandis que :focus-visible ne s’applique que lorsque le navigateur juge pertinent d’afficher visuellement ce focus, généralement lors de la navigation au clavier.

En CSS, :focus et :focus-visible sont deux pseudo-classes liées au focus, mais elles ne répondent pas au même besoin d’ergonomie et d’accessibilité.

1. :focus

Définition

:focus s’applique dès qu’un élément reçoit le focus, quelle que soit la manière :

• clic souris
• tabulation clavier
• script (element.focus())
• tap sur mobile

Exemple

button:focus {
  outline: 2px solid blue;
}

Ici, le bouton aura ce style :

• quand on clique dessus à la souris
• quand on y arrive au clavier
• dans tous les cas

Problème ergonomique

Cela peut produire des effets visuels indésirables :

• On voit un contour de focus après chaque clic souris.
• Certains designers suppriment alors le focus, ce qui casse l’accessibilité clavier (très mauvaise pratique).

2. :focus-visible

Définition

:focus-visible s’applique uniquement quand le navigateur estime que l’indicateur de focus doit être visible, en général :

• ✅ navigation au clavier
• ❌ clic souris
• ❌ tap tactile

Le navigateur utilise des heuristiques (et la spec) pour décider si l’utilisateur est en mode navigation non-pointing (clavier, lecteur d’écran, etc.).

Exemple

button:focus-visible {
  outline: 2px solid blue;
}

Résultat :

• Le contour apparaît au clavier
• Le contour n’apparaît pas au clic souris

3. Différence conceptuelle

4. Bon pattern moderne recommandé

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid blue;
}

Cela permet :

• Pas de focus visible au clic souris
• Focus toujours visible au clavier
• Accessibilité préservée
• UX propre

5. Support navigateur

:focus-visible est aujourd’hui supporté par :

• Chrome
• Edge
• Firefox
• Safari (versions récentes)

Pour anciens navigateurs, il existe un polyfill officiel :

https://github.com/WICG/focus-visible

6. Pourquoi c’est crucial pour l’accessibilité

• Les utilisateurs clavier ont besoin de voir où ils sont.
• Les utilisateurs souris n’ont pas besoin d’un indicateur permanent.
• :focus-visible permet de réconcilier UX et accessibilité sans compromis.

7. Résumé court

:focus = focus technique
:focus-visible = focus quand il est pertinent de le montrer