Focus visible

Silktide vérifie que les contrôles sur votre page — liens, boutons et champs de formulaire — changent visiblement lorsqu’ils sont sélectionnés au clavier. Sans changement visible, les utilisateurs du clavier ne peuvent pas savoir où ils se trouvent sur la page.

Vous pouvez l’essayer vous-même : chargez une page et appuyez plusieurs fois sur la touche Tabulation. Chaque contrôle sur lequel vous atterrissez devrait modifier son apparence, par exemple en affichant un contour ou un arrière-plan différent.

Tous les contrôles standard du navigateur affichent le focus par défaut, donc un échec ici signifie presque toujours qu’une feuille de style a désactivé l’indicateur par défaut, ou qu’un contrôle personnalisé a été conçu sans indicateur.

Pourquoi c’est important

Les personnes qui ne peuvent pas utiliser une souris naviguent avec la touche Tabulation, et l’indicateur de focus est leur seul moyen de savoir sur quel contrôle elles se trouvent. Lorsqu’un concepteur le retire — souvent parce que le contour par défaut était jugé inesthétique — les utilisateurs du clavier se retrouvent à appuyer sur des touches à l’aveugle, sans savoir ce que la touche Entrée activera.

Comment corriger le problème

Repérez où votre désactive le focus, généralement avec une règle comme outline: none ou outline: 0, et retirez-la.
Si vous remplacez le contour par défaut, fournissez une alternative claire à l’état :focus :

\/* Restaure un indicateur visible pour les champs au focus *\/
input:focus {
  outline: 2px solid #396196;
}

Donnez aux contrôles personnalisés, comme vos propres menus déroulants ou curseurs, un style de focus explicite — ils n’en ont pas par défaut.

Pour savoir à quel point un indicateur doit être visible, consultez Focus clair, le complément plus strict de ce contrôle.

Comment Silktide teste cela

Simuler un utilisateur au clavier qui parcourt avec Tab chaque élément pouvant recevoir le focus sur la page, en sautant les éléments que vous avez exclus de la vérification, les éléments masqués aux utilisateurs voyants, et les éléments avec un tabindex de -1.
Comparer les styles de chaque élément à l’état focalisé et non focalisé.
Signaler les éléments dont l’apparence ne change d’aucune manière qu’un utilisateur voyant pourrait distinguer lorsqu’ils reçoivent le .

Dépannage

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

Les styles de focus devraient être définis uniquement en CSS. Si le focus est appliqué par — par exemple un script qui ajoute une classe — Silktide pourrait ne pas l’observer, et cela peut ne pas fonctionner avec des 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’implanter le focus ne peuvent pas être détecté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 en cascade vers 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.

Des éléments inattendus peuvent recevoir le focus

Des balises comme <div> ou <span> deviennent focalisables lorsqu’on leur donne 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’un d’eux apparaît dans vos résultats, il est réellement atteignable au clavier et a besoin d’un style de focus. Voir tabindex sur MDN.