Focus non partiellement masqué

Silktide vérifie que lorsqu’un contrôle est sélectionné au clavier, aucune de ses parties n’est cachée derrière un autre contenu, comme une bannière de témoins ou un en-tête fixe. Même un contrôle partiellement couvert peut laisser un utilisateur du clavier incertain de l’endroit où il se trouve sur la page.

Les causes les plus courantes sont des éléments qui restent en place pendant le défilement de la page :

Bannières en haut ou en bas de la page, comme des avis de témoins
Barres de navigation et pieds de page collants (sticky)
Boîtes de dialogue qui permettent au focus de se déplacer derrière elles

Il s’agit de la version plus stricte du de niveau AAA (critère 2.4.12) de Focus non masqué : la vérification de ne signale que les contrôles complètement couverts, alors que celle-ci signale tout recouvrement, même partiel.

Pourquoi c’est important

Les personnes qui naviguent au clavier suivent l’ pour savoir sur quel contrôle elles se trouvent. Lorsqu’une partie d’un contrôle ayant le focus disparaît sous une bannière de témoins ou un pied de page collant, l’utilisateur peut manquer l’indicateur, mal lire l’étiquette du contrôle ou perdre sa position — et un contrôle partiellement couvert sur votre écran peut être entièrement couvert sur un écran plus petit.

Comment corriger

Préférez du contenu qui défile avec la page plutôt que des éléments fixes par-dessus.
Lorsque vous devez garder une bannière ou un en-tête fixe, utilisez les propriétés CSS scroll-padding ou scroll-margin pour que les éléments focalisés se déplacent à découvert lors du défilement — voir la technique WCAG C43.
Pour les boîtes de dialogue et les fenêtres contextuelles, piégez le focus à l’intérieur pendant qu’elles sont ouvertes afin que rien derrière ne puisse recevoir le focus. La plupart des bibliothèques de dialogue et l’élément natif <dialog> le font pour vous.

Comment Silktide teste ceci

Simuler un utilisateur au clavier qui parcourt par tabulation chaque élément focalisable, en mode bureau et mobile.
Simuler le défilement vertical du navigateur pour amener chaque élément focalisé au centre de l’écran (voir la note sur le défilement ci-dessous).
Vérifier si un autre élément se trouve au-dessus de l’élément ayant le focus. Les éléments qui se chevauchent avec des arrière-plans transparents ou semi-transparents sont ignorés, car l’indicateur de focus demeure visible à travers eux.
Signaler le contrôle si une partie quelconque est couverte par un élément opaque. Si vous ne devez satisfaire qu’au niveau AA, les cas complètement couverts sont ceux que Focus non masqué signale.

Pourquoi nous simulons le défilement

La quantité de défilement entre les pressions sur Tab varie selon la taille de la fenêtre, de sorte qu’un en-tête collant peut ou non recouvrir un élément focalisé selon des écrans qui ne diffèrent que de quelques pixels en hauteur. Tester à une taille de fenêtre exacte signalerait des problèmes que personne ayant une fenêtre légèrement différente ne pourrait reproduire.

À la place, Silktide évalue chaque élément comme s’il était défilé jusqu’au centre de l’écran. Cette approche volontairement généreuse signale des problèmes qui touchent toutes les tailles d’écran de façon constante et évite ceux qui ne touchent qu’une hauteur de fenêtre précise. Le W3C ne précise pas comment ce critère doit être testé.

Boîtes de dialogue qui s’ouvrent après le chargement de la page

Si une page contient une boîte de dialogue fermée par défaut, Silktide suppose que, pendant qu’elle est ouverte, le focus ne peut pas en sortir — ce qui est le comportement d’une boîte de dialogue correctement construite. Une boîte de dialogue défectueuse qui laisse échapper le focus derrière elle peut donc ne pas être signalée à moins qu’elle ne soit ouverte lors du chargement de la page.

Dépannage

Je vois très bien l’élément ayant le focus

Vérifiez dans une fenêtre plus petite : les éléments masqués par des en-têtes ou pieds de page collants n’entrent souvent en collision qu’à certaines hauteurs de fenêtre. Si vous concluez que l’élément n’est jamais significativement masqué, vous pouvez ignorer ce constat.