Un bouton qui affiche un contour bleu épais à chaque clic de souris agace autant qu’il rassure un utilisateur au clavier. Ce billet répond à une question précise : comment un développeur de blocs peut-il proposer un contour de focus visible uniquement pour la navigation au clavier, sans toucher aux autres pseudo-classes de focus déjà utilisées ailleurs dans le projet ?
Le champ de formulaire d’un bloc personnalisé reçoit naturellement le focus du navigateur, que ce soit par un clic de souris, un appui sur la touche tabulation, ou un script qui appelle .focus() directement. La pseudo-classe :focus seule ne distingue pas ces cas ; c’est là que :focus-visible change la donne.
Le comportement par défaut, et pourquoi il gêne
Sans intervention, la plupart des navigateurs appliquent déjà une heuristique proche de :focus-visible pour leur propre style natif, mais un bloc qui personnalise son style de focus avec la seule pseudo-classe :focus écrase ce comportement et applique son style à chaque interaction, y compris un simple clic de souris sur un champ déjà rempli :
.wp-block-monplugin-formulaire input:focus {
outline: 3px solid #2563eb;
outline-offset: 2px;
}Ce style, bien intentionné pour l’accessibilité, devient vite perçu comme un défaut visuel par les utilisateurs à la souris, qui voient un halo épais apparaître à chaque champ cliqué.
Remplacer :focus par :focus-visible
La correction directe consiste à remplacer la pseudo-classe pour ne cibler que les cas où le navigateur juge l’indication de focus nécessaire, typiquement la navigation au clavier :
.wp-block-monplugin-formulaire input:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}
.wp-block-monplugin-formulaire input:focus:not(:focus-visible) {
outline: none;
}
La seconde règle neutralise explicitement le contour par défaut du navigateur quand le focus est actif mais non jugé « visible » par son heuristique, ce qui évite un double style incohérent entre navigateurs.
Vérifier le support dans les navigateurs ciblés
La pseudo-classe :focus-visible bénéficie d’un support large dans les navigateurs modernes depuis plusieurs années. Sur un projet qui doit encore composer avec un navigateur ancien ne la reconnaissant pas, la règle utilisant :focus-visible est simplement ignorée par ce navigateur, qui continue d’appliquer son propre style natif de focus, sans régression grave.
Adapter le contour au design du bloc
Le contour ne doit jamais disparaître entièrement sans alternative : c’est un repère indispensable pour une personne qui navigue au clavier. Un bloc de formulaire soigné peut choisir une couleur de contour cohérente avec sa charte, tout en conservant un contraste suffisant avec le fond du champ :
- Utiliser un décalage (
outline-offset) pour éviter que le contour ne colle au bord du champ. - Vérifier le contraste du contour sur fond clair et sur fond sombre si le bloc supporte les deux.
- Tester le rendu réel au clavier, avec la touche tabulation, plutôt que de se fier uniquement à l’aperçu visuel dans l’éditeur.
Un test rapide pour valider le résultat
Le test le plus fiable reste manuel : cliquer sur un champ à la souris, puis appuyer sur la touche tabulation pour passer au champ suivant. Le premier geste ne doit produire aucun contour marqué, le second doit en afficher un clairement visible. Ce test simple suffit à confirmer que la distinction fonctionne comme attendu sur le bloc concerné.
Un contour de focus supprimé sans alternative reste l’une des régressions d’accessibilité les plus fréquentes en revue de code : mieux vaut toujours vérifier ce que
outline: nonelaisse réellement à la place avant de le valider.
En résumé
Remplacer :focus par :focus-visible dans un bloc de formulaire règle en quelques lignes un inconfort visuel réel, sans sacrifier l’accessibilité au clavier. La règle à retenir reste simple : le contour doit disparaître pour la souris, jamais pour le clavier, et un test manuel rapide suffit à vérifier que le bloc respecte bien cette distinction avant sa mise en production.
