Focus clair

Silktide vérifie que les contrôles de votre page — liens, boutons et champs de formulaire — modifient suffisamment clairement leur apparence lorsqu’ils sont sélectionnés au clavier. Il ne suffit pas qu’un changement existe ; il doit être suffisamment marqué et contrasté pour être réellement visible.

Il s’agit d’une version plus stricte de Focus visible : cette vérification demande si un indicateur de focus existe, tandis que celle-ci mesure si l’indicateur est suffisamment proéminent.

Vous pouvez l’essayer vous‑même : chargez une page et appuyez plusieurs fois sur la touche Tab. Chaque contrôle sur lequel vous arrivez devrait changer visiblement, par exemple en obtenant un contour bien distinct ou un arrière‑plan contrasté.

Pourquoi c’est important

Les personnes qui naviguent au clavier — notamment de nombreuses personnes avec des limitations motrices et les utilisateurs d’interfaces à contacteurs — dépendent de la visibilité de l’emplacement du . Un indicateur de focus techniquement présent mais pâle, fin ou peu contrasté est aussi inutile qu’une absence d’indicateur : l’utilisateur perd sa position sur la page et ne peut pas savoir quel contrôle sera activé en appuyant sur Entrée.

Comment corriger

La solution la plus simple et fiable consiste à afficher un contour plein autour du contrôle focalisé, d’au moins 2 pixels d’épaisseur, dans une couleur contrastant à la fois avec le contrôle et avec son environnement.

Un indicateur bicolore garantit la visibilité quel que soit l’arrière‑plan :

/* Un contour transparent conserve l’indicateur en mode couleurs forcées */
:focus {
  outline: 2px solid transparent;
  /* Halo clair + anneau foncé : l’un des deux est toujours contrasté */
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

Cette approche provient de la technique WCAG C40.

Évitez les indicateurs le long d’un seul bord, comme une bordure inférieure : leur surface suffisante dépend de la longueur de ce bord, qui varie pour les liens textuels.

Comment Silktide teste cela

Simuler un utilisateur au clavier parcourant tous les éléments focalisables de la page avec Tab, en ignorant les éléments exclus du contrôle, ceux cachés aux utilisateurs voyants, et ceux avec un tabindex de -1.
Comparer les styles de chaque élément à l’état focalisé et non focalisé.
Considérer comme réussis les éléments qui conservent le contour de focus par défaut du navigateur, ou dont la couleur d’arrière‑plan change avec un contraste d’au moins 3:1 entre les deux états.
Sinon, mesurer les contours, bordures et ombres des deux états, et calculer la surface qui change avec un contraste suffisant. Pour réussir, cette surface doit être au moins équivalente à un périmètre de 2 pixels d’épaisseur autour de l’élément, conformément à l’exigence 2.4.13.

Dépannage

Le style de focus nécessite JavaScript pour apparaître

Les styles de focus doivent être définis uniquement en . Si le focus est appliqué par — par exemple un script ajoutant une classe — Silktide peut ne pas le détecter, et cela peut ne pas fonctionner pour les technologies d’assistance sans clavier physique. Essayez de désactiver JavaScript et de parcourir la page avec Tab pour confirmer.

Styles de focus que nous ne pouvons pas mesurer

Certaines manières d’implémenter le focus ne peuvent pas être détectées ou mesurées automatiquement :

Focus dessiné avec des pseudo‑éléments tels que ::before ou ::after.
Focus appliqué via :focus-within sur un conteneur.
Styles de focus répercutés sur des éléments enfants, comme un <span> à l’intérieur d’un lien. Certains de ces cas sont détectés, mais pas toutes les variantes.

Les éléments utilisant ces techniques sont ignorés plutôt que signalés.

Éléments sur des images ou avec des arrière‑plans imprévisibles

Le contraste est calculé par rapport à une couleur d’arrière‑plan connue. Lorsqu’un élément se trouve sur une image, ou est positionné en dehors de son parent de sorte que son arrière‑plan ne peut pas être déterminé, Silktide l’ignore plutôt que de deviner.

Des éléments inattendus sont focalisables

Des balises comme <div> ou <span> deviennent focalisables lorsqu’on leur donne un tabindex de 0 ou plus, c’est ainsi que les contrôles personnalisés prennent en charge l’utilisation au clavier. Si l’une apparaît dans vos résultats, elle est réellement atteignable au clavier et a besoin d’un style de focus. Voir tabindex sur MDN.