WCAG 2.4.7 Visibilité du focus

Le critère de succès 2.4.7 exige que toute interface utilisable au clavier comporte un mode de fonctionnement dans lequel l'indicateur de focus clavier est visible. C'est un critère de niveau AA sous la règle 2.4 (Navigable).

Pourquoi un indicateur de focus visible compte

Une personne qui navigue par tabulation ne dispose d'aucun curseur de souris pour savoir où elle se trouve : le seul signal est le contour de focus du navigateur, ou son équivalent personnalisé, autour de l'élément qui a actuellement le focus. Sans lui, une personne utilisant uniquement le clavier avance à l'aveugle : elle peut déplacer le focus et déclencher des actions, mais n'a aucun moyen de voir quel élément elle est sur le point d'activer avant d'appuyer sur Entrée.

La façon la plus courante dont cela échoue

outline: none ou outline: 0 appliqué largement en CSS, en général pour retirer l'anneau de focus par défaut du navigateur à des fins esthétiques, sans style de remplacement. C'est une pratique extrêmement répandue dans les systèmes de conception qui privilégient le soin visuel sans réaliser que le contour par défaut accomplissait un véritable travail d'accessibilité, et n'ajoutait pas seulement un encombrement visuel indésirable.

/* Supprime entièrement l'indicateur de focus : non-conforme, sans remplacement */
button:focus {
  outline: none;
}

/* Supprime le contour par défaut mais le remplace par une alternative volontaire et visible */
button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

La distinction entre :focus et :focus-visible

La pseudo-classe CSS moderne :focus-visible cible spécifiquement le focus obtenu au clavier - ou par d'autres moyens que le pointeur -, en laissant non mis en forme l'état de focus consécutif à un clic de souris. Cela satisfait un objectif de conception courant - « je ne veux pas d'anneau de focus au clic, seulement lors d'une navigation au clavier » - sans supprimer par accident l'indicateur dont dépendent réellement les personnes qui naviguent au clavier. Utiliser :focus-visible plutôt que supprimer inconditionnellement toute mise en forme de :focus est la correction moderne habituelle pour les équipes qui trouvaient le contour par défaut visuellement indésirable, spécifiquement lors d'une interaction à la souris.

Ce qu'un indicateur de focus conforme doit présenter

Il n'a nullement besoin d'être le contour bleu par défaut du navigateur : tout style personnalisé convient, dès lors qu'il est nettement visible sur la page environnante - en satisfaisant le minimum de 3:1 du critère Contraste du contenu non textuel - et distingue clairement l'élément ayant le focus de son état sans focus.