Focus visible : pourquoi supprimer outline:0 est une erreur d'accessibilité

Pourquoi le focus visible est obligatoire

WCAG 2.4.7 (AA) exige que les éléments recevant le focus clavier soient visiblement indiqués. Supprimer l'indicateur de focus (outline:none ou outline:0) est l'une des erreurs d'accessibilité les plus répandues — et l'une des plus impactantes pour les utilisateurs clavier.

Qui est affecté ?

• Personnes avec handicap moteur (tremblements, paralysie partielle) qui naviguent au clavier
• Utilisateurs de commutateurs (switch access)
• Utilisateurs de lecteurs d'écran
• Utilisateurs "power users" naviguant au clavier par choix

En France, environ 4 millions de personnes dépendent de la navigation clavier.

La mauvaise pratique : supprimer l'outline

/* ERREUR FRÉQUENTE */
* { outline: none; }
:focus { outline: 0; }

Ce CSS désactive complètement la visibilité du focus sur TOUS les éléments interactifs.

La bonne pratique : focus personnalisé

/* CORRECT : style de focus visible et esthétique */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-radius: 2px;
}

:focus-visible s'applique seulement quand l'utilisateur navigue au clavier (pas au clic souris), préservant l'esthétique tout en maintenant l'accessibilité.

WCAG 2.4.11 dans WCAG 2.2

WCAG 2.2 (publié 2023) ajoute le critère 2.4.11 (AA) qui exige un indicateur de focus avec une aire minimale et un contraste suffisant. Autrement dit, un outline en pointillés à faible contraste ne suffit plus.