Tu Tab, mais t’as aucun retour visuel ?

C’est pas un oubli. C’est une décision design… pas très inclusive.

Ne pas voir où on est, c’est bloquant. Surtout quand on navigue au clavier. Et beaucoup de gens naviguent au clavier : personnes avec des troubles moteurs, utilisateurs de lecteurs d’écran, power users, ou simplement quelqu’un avec une souris cassée un mardi soir.

:focus-visible te montre ce qui compte, quand ça compte

Il s’active uniquement quand tu navigues au clavier, sans impacter le look quand on utilise la souris. Tu peux styliser proprement, sans nuire à l’esthétique.

/* ❌ Ne jamais faire ça */
*:focus {
  outline: none;
}

/* ✅ Styliser le focus clavier proprement */
:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 4px;
}

Avec :focus-visible, le navigateur affiche l’indicateur de focus seulement quand c’est pertinent :

• Tab / Shift+Tab → l’outline apparaît
• Clic souris → pas d’outline (le navigateur sait que tu as pointé l’élément)

C’est le meilleur des deux mondes : accessible et esthétique.

Ce qu’il faut retenir

• Pas de outline: none sans alternative. Si tu supprimes l’outline par défaut, tu dois fournir un style de remplacement visible. Sinon, tu rends ton site inutilisable au clavier.
• Stylise :focus-visible à ton goût. Couleur de la marque, ombre, background, ce que tu veux — tant que c’est visible avec un ratio de contraste suffisant (3:1 minimum selon le WCAG).
• Teste au clavier et au lecteur d’écran. Vraiment. Pas juste “je Tab une fois”. Fais le parcours complet : navigation, formulaire, modale, menu.

Un exemple concret

/* Style de focus accessible et élégant */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sur les boutons : fond subtil */
button:focus-visible {
  outline: 2px solid #7c3aed;
  background-color: rgba(124, 58, 237, 0.05);
}

/* Sur les liens : soulignement renforcé */
a:focus-visible {
  outline: 2px solid #7c3aed;
  text-decoration-thickness: 3px;
}

Le critère RGAA concerné

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

C’est un critère de niveau A — le minimum requis. Et pourtant, c’est l’un des plus fréquemment échoués en audit. Souvent parce qu’un outline: none traîne dans un reset CSS que personne n’a jamais remis en question.

---

Accessibilité ≠ supprimer ce qui gêne. Accessibilité = montrer ce qui aide.

Pour aller plus loin

• Idée reçue : “Mon site est accessible” — pourquoi le focus visible n’est qu’un début
• Les outils pour tester l’accessibilité au clavier