Bonnes pratiques

Focus visible : pourquoi outline: none casse l'accessibilité clavier

Supprime-t-on l'outline CSS par esthétique, on rend le site inutilisable au clavier. Cette pratique répandue viole deux critères WCAG en jeu : le focus visible (2.4.7) et le focus non masqué (2.4.11). Les solutions modernes, :focus-visible et outline-offset, permettent un indicateur discret, contrasté et conforme.

La réponse courte

L'indicateur de focus (souvent un outline gris ou bleu) signale qu'un élément de formulaire, un lien ou un bouton reçoit l'interaction au clavier. Supprimer cet outline avec outline: none sans le remplacer rend la navigation clavier invisible : un handicap grave pour tout utilisateur qui ne peut pas utiliser la souris. Le critère WCAG 2.4.7 l'exige ; le 2.4.11 précise qu'il ne doit pas être masqué.

Le focus ne sert pas uniquement à montrer qu'un élément est sélectionné. Il permet aussi de comprendre où l'on se trouve dans le parcours de la page, quelle action sera déclenchée avec la touche Entrée et quel champ recevra la prochaine saisie. Sans repère visuel, l'utilisateur doit deviner sa position ou recommencer la navigation depuis le début.

La correction ne consiste donc pas à conserver obligatoirement le style natif du navigateur. Elle consiste à garantir un indicateur perceptible, cohérent et suffisamment contrasté sur chaque composant interactif. Cet indicateur peut respecter l'identité graphique du site, à condition de rester visible dans tous les états et sur tous les arrière-plans.

Pourquoi outline: none est devenu une habitude

L'outline par défaut des navigateurs est un rectangle gris ou bleu assez épais, imposé depuis les années 1990 pour la sécurité d'accès. Dès les années 2010, les designers l'ont jugé inesthétique : il « casserait » le design épuré. Les CSS resets (Normalize, Reset, ou bootstrap natifs) ont commencé à le masquer, souvent sans remplacement : « outline: none » s'est propagé comme pattern standard des frameworks et des ateliers de développement.

Le problème est systémique : cette suppression est quasi automatique, rarement intentionnelle. L'étude Inclaria 2026 montre que parmi les 55 sites e-commerce français analysés, la majorité des non-conformités critiques incluent au moins une suppression d'outline sans remplacement. C'est un symptôme : pas de test clavier, pas de révision d'accessibilité en amont du design.

Une autre cause fréquente est la confusion entre le focus déclenché par un clic et celui déclenché par le clavier. Les équipes souhaitent retirer l'anneau qui apparaît après un clic de souris, puis appliquent outline: none à tous les états :focus. Cette règle affecte alors également les personnes qui utilisent Tab, Maj + Tab ou une technologie d'assistance. :focus-visible répond précisément à ce problème en distinguant les modalités d'interaction.

Qui est bloqué ?

Quatre profils sont directement impactés.

• Les utilisateurs de clavier seul : handicap moteur, tremblements, paralysie, ou technologie d'assistance (pédalier, souris adaptée). Ils ne voient rien se passer quand ils tabulent dans le formulaire.
• Les utilisateurs qui naviguent au clavier par préférence : développeurs, data analysts, power users qui gagnent 15 secondes par formulaire, les aveugles et malvoyants naviguant avec un lecteur d'écran (qui s'appuie souvent sur le focus visuel du navigateur ou sur un anneau de lecteur).
• Les utilisateurs âgés ou en situation de fatigue motrice : la precision à la souris devient difficile ; le clavier est plus facile et plus rapide.
• Les situations de handicap temporaire : bras cassé, trackpad défaillant, travailler sur un moniteur tactile sans souris.

Le blocage peut être total sur un formulaire long. Une personne peut parvenir jusqu'au bouton de validation sans savoir quel contrôle est actif, déclencher involontairement un lien secondaire ou modifier un champ déjà rempli. Sur une fenêtre modale, l'absence d'indicateur peut aussi donner l'impression que le clavier ne fonctionne plus, alors que le focus continue de se déplacer sur des éléments invisibles ou situés derrière la fenêtre.

Les critères WCAG en jeu

Deux critères posent problème :

Au niveau de la conformité légale, ces deux critères sont de niveau AA, obligatoires en France sous la directive européenne (European Accessibility Act, applicable dès le 28 juin 2025 pour les nouveaux services, 28 juin 2030 pour les services existants).

La visibilité doit être vérifiée dans les conditions réelles d'utilisation, pas uniquement sur un composant isolé dans une bibliothèque de design. Un anneau conforme sur fond blanc peut devenir imperceptible dans un bandeau bleu, être coupé par overflow: hidden ou disparaître sous un en-tête positionné en fixed. La conformité dépend donc du rendu final, de la position de l'élément et de son environnement visuel.

La solution moderne : :focus-visible et outline-offset

Les navigateurs modernes et assistants technologiques supportent :focus-visible (depuis 2018, IE 11 non supporté, mais il demande une stratégie dégradée : .element:focus { outline: 2px solid #0066cc; } puis .element:focus-visible { /* règles raffinées */ }).

La règle à retenir : :focus-visible cible uniquement le focus au clavier, pas le focus à la souris (sur .element:focus-visible { … }). Cela permet de garder l'interface épurée au clic tout en gardant le clavier accessible.

Exemple 1 : remplacer l'outline par défaut

a, button, input:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }

Ici, outline-offset: 2px crée un espace entre l'élément et l'anneau, ce qui évite de masquer le contenu (critère 2.4.11).

Pour une couverture homogène, la même logique doit être appliquée aux autres composants interactifs : zones de texte, listes déroulantes, contrôles personnalisés, éléments avec tabindex et widgets JavaScript. Ajouter une règle uniquement aux liens et aux boutons laisse souvent des trous dans le parcours clavier.

Exemple 2 : outline gris contrasté, pour dark mode aussi

a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #333; outline-offset: 4px; } @media (prefers-color-scheme: dark) { a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #fff; } }

Le contraste 3:1 minimum (lien 1.4.11, nuance de gris) est respecté : #333 sur blanc = 8,6:1 de contraste.

Exemple 3 : box-shadow comme indicateur

Quid si tu veux vraiment remplacer l'outline ? Le box-shadow fonctionne aussi, mais ne repousse pas le décalage comme outline-offset :

a:focus-visible { outline: none; box-shadow: 0 0 0 3px #0066cc; }

Attention : box-shadow consomme un peu plus de GPU que outline, et n'est pas dessiné en dehors des conteneurs `overflow: hidden`. outline est plus robuste.

Si outline: none reste nécessaire dans une règle spécifique, son remplacement doit être défini dans le même bloc ou dans une règle immédiatement identifiable. Cette proximité limite le risque qu'une future modification de la cascade supprime l'indicateur alternatif. Il faut également tester les états combinés, notamment :hover, :active, :disabled et :focus-visible, afin qu'un style plus spécifique n'écrase pas accidentellement le focus.

Comment tester que le focus est visible

• Appuyer sur Tab au clavier : chaque élément interactif (lien, bouton, champ de saisie) doit avoir un anneau visible autour.
• Ouvrir les DevTools du navigateur (F12), onglet « Accessibility » (Chrome, Edge) ou « Inspector → Accessibility » (Firefox), et regarder le focus indicator quand on tabule.
• Utiliser un lecteur d'écran (NVDA sur Windows, VoiceOver sur Mac/iOS) : il annonce l'élément en focus ; le visual focus doit suivre en même temps.

Le test doit couvrir toute la page dans les deux sens, avec Tab puis Maj + Tab. L'ordre de déplacement doit rester logique, l'indicateur ne doit jamais disparaître et aucun élément ne doit piéger le clavier. Il faut aussi ouvrir les menus, accordéons, fenêtres modales et composants dynamiques, car leur comportement n'est pas toujours visible lors d'un simple parcours de la page principale.

Teste enfin plusieurs largeurs d'écran et niveaux de zoom. À 200 %, un en-tête fixe ou un bandeau de consentement peut recouvrir l'élément focalisé alors que tout semble correct à 100 %. Le focus doit rester au moins partiellement visible lorsque le contenu se réorganise.

Détection des suppressions d'outline

Le scanner Inclaria teste deux choses : (1) l'présence d'un indicateur de focus visible sur les éléments clés (formulaires, boutons, liens) ; (2) l'offset de cet indicateur (pas de masquage sous un menu fixe, par exemple). Une suppression d'outline: none sans remplacement est flaggée en non-conformité WCAG 2.4.7.

Le rapport priorise ce défaut : il apparaît souvent sur des centaines d'éléments (CSS reset appliquée partout), et a un impact direct sur l'utilisabilité.

Une détection automatisée permet de repérer rapidement les règles CSS suspectes et les composants sans style de remplacement. Elle doit toutefois être complétée par un test manuel au clavier, car la visibilité réelle dépend du contraste, du contexte graphique, du défilement et des éventuels éléments superposés.