Focus clair

Silktide vérifie que les contrôles de votre page - liens, boutons et champs de formulaire - changent suffisamment clairement d’apparence lorsqu’ils sont sélectionnés au clavier. Il ne suffit pas qu’un changement existe; il doit être suffisamment grand et à fort contraste pour être réellement visible.

Il s’agit d’une version plus stricte de Focus visible : ce contrôle vérifie si un indicateur de focus existe, tandis que celui-ci mesure si l’indicateur est suffisamment proéminent.

Vous pouvez l’essayer vous-même : chargez une page et appuyez à répétition sur la touche Tab. Chaque contrôle sur lequel vous arrivez devrait changer visiblement, par exemple en gagnant un contour distinct ou un arrière-plan contrasté.

Pourquoi c’est important

Les personnes qui naviguent au clavier - y compris de nombreuses personnes ayant des limitations motrices et les utilisateurs de dispositifs à contacteur - dépendent de la visibilité du . Un indicateur de focus techniquement présent mais faible, fin ou à faible contraste est aussi inutile que l’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 correction la plus simple et fiable est un contour uni autour du contrôle focalisé, d’au moins 2 pixels d’épaisseur, dans une couleur qui contraste avec le contrôle et son environnement.

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

\/* Un contour transparent maintient un indicateur en mode forced-colors *\/
:focus {
  outline: 2px solid transparent;
  \/* Halo clair + anneau foncé : l’un des deux contraste toujours *\/
  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 dimension suffisante dépend de la longueur de ce bord, qui varie pour les liens textuels.

Comment Silktide teste ceci

Simuler la navigation d’un utilisateur au clavier en tabulant à travers chaque élément focalisable de la page, en sautant les éléments que vous avez exclus de la vérification, les éléments cachés aux utilisateurs voyants, et les éléments avec un tabindex de -1.
Comparer les styles de chaque élément dans ses états focalisé et non focalisé.
Réussissent 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 compter la zone qui change avec un contraste suffisant. Pour réussir, cette zone doit être au moins aussi grande qu’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 a besoin de JavaScript pour s’afficher

Les styles de focus devraient être définis uniquement en . Si le focus est appliqué par - par exemple un script qui ajoute une classe - Silktide peut ne pas l’observer, 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 façons 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 transmis à 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 peuvent recevoir le focus

Des balises comme <div> ou <span> deviennent focalisables lorsqu’on leur attribue un tabindex de 0 ou plus, ce qui est la façon dont 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.