Il y a une ligne CSS qu’on trouve dans des milliers de feuilles de styles WordPress :
* { outline: none; }
/* ou */
a:focus, button:focus { outline: none; }
/* ou */
:focus { outline: 0; }Elle est là parce que l’outline par défaut du navigateur est jugé inesthétique, un liseré bleu ou noir qui casse le design soigné du thème. La supprimer semble une décision de confort visuel sans conséquences.
C’est en réalité l’une des erreurs d’accessibilité les plus impactantes qu’un site puisse commettre.
Pourquoi le focus visible est critique
L’indicateur de focus remplit une fonction précise : il dit à l’utilisateur clavier où il est dans la page. Sans lui, naviguer au clavier revient à conduire de nuit sans phares.
Concrètement, un utilisateur clavier sans indicateur de focus :
- Ne sait pas sur quel lien ou bouton il se trouve
- Ne peut pas confirmer qu’un Tab a bien déplacé son focus
- Ne peut pas distinguer un élément focusé d’un élément non focusé
- Doit deviner l’ordre de tabulation sans repère visuel
Ce n’est pas un inconfort, c’est une impossibilité d’utilisation pour les personnes qui ne peuvent pas utiliser la souris pour se repérer.
Les profils impactés :
- Utilisateurs avec limitations motrices qui naviguent au clavier par nécessité
- Utilisateurs malvoyants qui utilisent le clavier et le zoom, sans lecteur d’écran
- Utilisateurs de navigation vocale (Dragon) qui ont besoin de voir quel élément est actif
- Utilisateurs en contexte difficile : forte luminosité, mauvais écran, fatigue visuelle
Ce que outline: none brise, et pour qui
Supprimer l’outline ne supprime pas le focus. Le focus existe toujours dans le DOM, les technologies d’assistance (AT) l’annoncent toujours, Tab le déplace toujours. Ce qu’on supprime, c’est uniquement son rendu visuel.
L’utilisateur de lecteur d’écran n’est pas affecté, NVDA lui annonce l’élément focusé verbalement. Mais l’utilisateur qui navigue au clavier sans lecteur d’écran perd tout repère.
Ce profil est beaucoup plus fréquent qu’on ne le pense. Un senior avec des tremblements qui utilise le clavier mais pas de lecteur d’écran. Un utilisateur en rééducation après un AVC.Tous voient l’écran et ont besoin de l’indicateur de focus.
:focus vs :focus-visible : la distinction qui change tout
Pendant longtemps, supprimer outline: none sur :focus avait un effet secondaire visible : les boutons et liens montraient l’outline au clic souris aussi bien qu’au clavier. Sur certains designs, un halo bleu autour d’un bouton juste après avoir cliqué dessus était réellement perturbant.
CSS a résolu ce problème avec :focus-visible.
:focus : s’applique à tout moment où l’élément a le focus, qu’il ait été atteint au clavier ou à la souris.
:focus-visible : s’applique uniquement quand le navigateur juge que l’indicateur de focus est nécessaire, c’est-à-dire principalement lors de la navigation au clavier.
/* ✗ Supprime le focus pour TOUT le monde */
:focus { outline: none; }
/* ✓ Masque l'outline au clic souris, le garde au clavier */
:focus:not(:focus-visible) { outline: none; }
/* ✓ Ou plus simplement, ne styler que :focus-visible */
:focus-visible {
outline: 3px solid #1A56A0;
outline-offset: 2px;
}Support navigateur : :focus-visible est supporté depuis Chrome 86, Firefox 85, Safari 15.4. Pour les navigateurs plus anciens, il se comporte comme :focus, l’indicateur reste visible, ce qui est l’état par défaut acceptable.
Concevoir un focus visible et esthétique
L’argument “l’outline est moche” est valide, l’outline par défaut du navigateur est générique et ne s’intègre pas à un design soigné. La réponse n’est pas de le supprimer mais de le remplacer par quelque chose de mieux.
Les propriétés CSS disponibles
:focus-visible {
/* Contour, le plus commun */
outline: 3px solid #1A56A0; /* couleur, épaisseur */
outline-offset: 2px; /* espace entre l'élément et l'outline */
/* Box shadow, alternative sans affecter le layout */
box-shadow: 0 0 0 3px #1A56A0;
/* Combinaison double anneau, meilleure visibilité sur fonds variés */
outline: 3px solid #1A56A0;
box-shadow: 0 0 0 6px white; /* anneau blanc entre l'élément et l'outline bleu */
}La technique du double anneau
Le problème d’un focus monocolore : sur un fond blanc, un outline blanc est invisible. Sur un fond foncé, un outline foncé est invisible. La solution est un double anneau, un contour clair et un contour foncé, qui reste visible sur n’importe quelle couleur de fond.
:focus-visible {
outline: 3px solid #1A56A0; /* anneau bleu */
outline-offset: 0;
box-shadow:
0 0 0 2px white, /* anneau blanc entre l'élément et le bleu */
0 0 0 5px #1A56A0; /* deuxième anneau bleu à l'extérieur */
}Cette technique est utilisée par GOV.UK, les Design Systems gouvernementaux, et de nombreux systèmes de conception modernes. Elle garantit la visibilité sur fond clair ET fond foncé.
Adapter le focus à chaque composant
Tous les éléments ne méritent pas le même traitement de focus. Un système cohérent différencie les composants.
/* Liens dans le texte */
a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
border-radius: 2px;
}
/* Boutons */
button:focus-visible {
outline: 3px solid #1A56A0;
outline-offset: 3px;
border-radius: 4px;
}
/* Champs de formulaire */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid #1A56A0;
outline-offset: 0;
box-shadow: 0 0 0 4px rgba(26, 86, 160, 0.2);
}
/* Composants sur fond sombre */
.hero a:focus-visible,
.header button:focus-visible {
outline: 3px solid white;
outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.5);
}Contraste du focus : WCAG 2.2 et critère 3.3
WCAG 2.2 (publié en 2023) a introduit deux nouveaux critères de niveau AA sur le focus :
2.4.11 (Focus Appearance) : l’indicateur de focus doit avoir un ratio de contraste d’au moins 3:1 entre son état focusé et non focusé, et une superficie minimale (périmètre × épaisseur ≥ surface équivalente à un périmètre × 2px).
2.4.12 (Focus Not Obscured) : l’élément focusé ne doit pas être entièrement masqué par un contenu sticky (header fixe, bannière cookie).
En pratique pour le RGAA 4.1.2, le critère 10.7 est le plus directement applicable : Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Ce critère ne précise pas de ratio de contraste minimum, il demande uniquement que le focus soit visible. Mais l’esprit de la règle est clair : un outline de 1px dans la couleur du fond n’est pas visible.
Tester le contraste du focus : utiliser le Colour Contrast Analyser pour mesurer le ratio entre la couleur de l’outline et le fond sur lequel il apparaît. Viser 3:1 minimum (recommandation WCAG 2.2), 4,5:1 pour une meilleure robustesse.
WordPress : corriger les thèmes qui suppriment le focus
La plupart des thèmes Full Site Editing (FSE) ont un focus visible correct par défaut. Mais les thèmes plus anciens ou personnalisés conservent souvent outline: none dans leurs styles globaux.
Diagnostic rapide : Tab sur la page → observer si un indicateur de focus apparaît sur les liens et boutons.
Correction dans theme.json (WordPress 6.1+) :
{
"styles": {
"elements": {
"button": {
"outline": {
":focus": {
"css": "outline: 3px solid var(--wp--preset--color--primary); outline-offset: 3px;"
}
}
},
"link": {
"outline": {
":focus": {
"css": "outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px;"
}
}
}
}
}
}Correction dans un CSS additionnel (quand theme.json ne suffit pas) :
/* Réinitialiser les suppressions du thème */
*:focus {
outline: revert;
}
/* Puis styler proprement */
*:focus-visible {
outline: 3px solid #1A56A0;
outline-offset: 2px;
}
*:focus:not(:focus-visible) {
outline: none;
}Note sur la priorité CSS : si le thème utilise !important sur outline: none, il faut aussi utiliser !important dans la correction, ou surcharger la règle avec un sélecteur plus spécifique.
Récapitulatif
Le focus visible est l’une des corrections les plus simples en accessibilité et l’une des plus impactantes. Trois lignes de CSS suffisent à corriger la majorité des situations.
/* La correction minimale universelle */
:focus-visible {
outline: 3px solid #1A56A0;
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}Ce n’est pas une question d’esthétique versus accessibilité, c’est une question de design réfléchi. Un focus visible bien conçu s’intègre au design autant qu’un hover bien conçu. Les deux sont des états interactifs qui méritent le même soin.