Focus visible : ce que casse un reset CSS trop agressif

Le navigateur affiche un contour bleu, pointillé ou en surbrillance autour de l’élément qui reçoit le focus clavier, sans qu’aucune ligne de CSS n’ait été écrite pour ça. Ce comportement vient de la feuille de style par défaut de l’agent utilisateur, celle que le navigateur applique avant même que le CSS du thème ne s’exécute. Beaucoup de développeurs le découvrent en creux, le jour où une personne signale qu’elle ne voit plus où elle se trouve sur le formulaire.

Ce billet revient sur ce que fait exactement cette indication native, pourquoi un reset CSS répandu la supprime sans prévenir, et comment la restaurer proprement sur un thème existant sans tout réécrire.

Ce que fait réellement l’indicateur natif de focus

Chaque navigateur définit une règle par défaut approximativement équivalente à :focus { outline: auto; } sur les éléments interactifs (liens, boutons, champs de formulaire). Cette règle vient de la feuille de style utilisateur agent, la même qui donne aux liens leur couleur bleue soulignée par défaut. Elle s’applique à n’importe quel élément qui peut recevoir le focus, qu’il soit atteint à la souris, au clavier ou par une commande vocale.

Cette indication sert un objectif précis : permettre à une personne qui navigue au clavier, avec la touche Tab, de savoir en permanence où se trouve le curseur logique sur la page. Sans elle, un formulaire de dix champs devient un jeu de devinettes : on sait qu’on a appuyé sur Tab, mais pas où on a atterri.

Pourquoi un reset CSS la supprime sans le vouloir

Les feuilles de reset ou de normalisation, très répandues au tournant des années 2010, avaient l’habitude d’inclure une ligne du type :

a, button, input, select, textarea {
  outline: none;
}

L’intention derrière cette ligne était esthétique : le contour natif, jugé disgracieux par beaucoup de designers, ne correspondait pas à l’identité visuelle du site. Le problème, c’est que outline: none ne remplace rien : il supprime purement l’indication, sans qu’aucun style alternatif ne prenne le relais. Résultat : au clavier, la page devient muette sur la position du focus.

Ce même schéma se retrouve dans des composants tiers (carrousels, sélecteurs personnalisés) qui appliquent leur propre reset local, souvent copié d’un ancien projet sans qu’on se souvienne pourquoi la ligne est là.

Restaurer un contour visible sur un thème existant

La correction la plus rapide consiste à réintroduire un style de focus explicite, sans revenir au rendu par défaut du navigateur si celui-ci ne convient pas visuellement :

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid #1a56db;
  outline-offset: 2px;
}

Cette règle fonctionne sur tous les navigateurs modernes et donne un contrôle total sur l’épaisseur, la couleur et le décalage du contour. Le point de vigilance porte sur le contraste : le contour doit se distinguer nettement du fond, y compris sur un bouton coloré, sinon on retombe dans le même problème avec un habillage différent.

Vérifier qu’aucun composant ne réapplique le reset localement

Il ne suffit pas de corriger la feuille globale : un composant JavaScript tiers (un widget de recherche, un lecteur vidéo personnalisé) peut réinjecter sa propre règle outline: none dans son fichier de style. La méthode la plus fiable pour les repérer consiste à rechercher la chaîne dans l’ensemble du dépôt avant publication :

grep -rn "outline: none\|outline:none" wp-content/themes/mon-theme/

• Chaque occurrence trouvée doit être justifiée par un style de remplacement dans le même bloc de règles.
• Les plugins tiers ne sont pas à l’abri : un carrousel ou un accordéon embarqué peut porter le même défaut.
• Un test manuel à la touche Tab sur l’ensemble du parcours (menu, formulaire, pied de page) reste le complément indispensable à cette recherche textuelle.

Sur chaque nouveau projet, j’ajoute cette règle de focus dans le premier commit du fichier CSS principal, avant même d’écrire la mise en page : ça évite d’avoir à la retrouver six mois plus tard sur un thème déjà en production.

En résumé

Le contour de focus natif n’est pas un vestige graphique à supprimer par réflexe : c’est le seul repère dont dispose une personne qui navigue au clavier pour savoir où elle se trouve sur la page. Un reset CSS qui le retire sans le remplacer casse cette navigation en une ligne. La correction tient tout aussi bien en quelques lignes, à condition de vérifier qu’aucun composant tiers ne réapplique discrètement le même défaut.