Focus visible

Silktide vérifie que les contrôles de votre page - liens, boutons et champs de formulaire - changent visiblement lorsqu'ils sont sélectionnés au clavier. Sans changement visible, les utilisateurs au 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 Tab. Chaque contrôle sur lequel vous arrivez doit modifier son apparence, par exemple en affichant un contour ou une couleur d'arrière-plan différente.

Chaque contrôle standard du navigateur affiche 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é créé sans en prévoir.

Pourquoi c'est important

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

Comment corriger

Trouvez où votre désactive le focus, généralement avec une règle comme outline: none ou outline: 0, et supprimez-la.
Si vous remplacez le contour par défaut, fournissez une alternative claire sur 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 l'indicateur doit être visible, voir Focus clair, l'équivalent plus strict de ce contrôle.

Comment Silktide teste ceci

Simuler un utilisateur au clavier qui parcourt tous les éléments focalisables de la page avec Tab, en ignorant les éléments que vous avez exclus du contrôle, les éléments masqué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é.
Signaler les éléments dont l'apparence ne change d'aucune manière qu'un utilisateur voyant puisse distinguer lorsqu'ils reçoivent le .

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 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 manières d'implémenter 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 sont focalisables

Des balises comme <div> ou <span> deviennent focalisables lorsqu'on leur attribue un tabindex de 0 ou supérieur, ce qui permet aux contrôles personnalisés de prendre en charge l'utilisation au clavier. Si l'une d'elles apparaît dans vos résultats, elle est réellement atteignable au clavier et nécessite un style de focus. Voir tabindex sur MDN.