Focus non masqué

Silktide teste que lorsqu’un élément interactif est sélectionné au clavier, il n’est pas complètement caché derrière un autre contenu, comme un bandeau de cookies ou un en-tête fixe. Un utilisateur au clavier qui ne peut pas voir l’élément sélectionné n’a aucun moyen de savoir où il se trouve sur la page.

Les causes les plus courantes sont des éléments qui restent fixes pendant que la page défile :

Bandeaux en haut ou en bas de page, comme les avis relatifs aux cookies
Barres de navigation et pieds de page fixes
Boîtes de dialogue contextuelles qui laissent le focus se déplacer derrière elles

Ce contrôle couvre l’occultation totale, comme l’exige au Niveau AA (critère 2.4.11). Son pendant plus strict au , Focus non partiellement masqué, signale aussi les éléments seulement partiellement recouverts.

Pourquoi c’est important

Les personnes qui naviguent au clavier se repèrent grâce à l’indicateur de pour savoir sur quel élément elles se trouvent. Lorsque le focus se déplace vers un élément enfoui sous un bandeau de cookies ou un pied de page fixe, l’indicateur disparaît : l’utilisateur ne peut pas savoir ce que fera l’appui sur Entrée, ni même où il se trouve, et peut abandonner la page.

Comment corriger

Privilégiez un contenu qui défile avec la page plutôt que des éléments fixés par‑dessus.
Lorsque la présence d’un bandeau ou d’un en‑tête fixe est indispensable, utilisez les propriétés CSS scroll-padding ou scroll-margin afin que les éléments recevant le focus défilent hors de sa zone — voir la technique WCAG C43.
Pour les boîtes de dialogue et les popups, bloquez le focus à l’intérieur tant 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 gèrent pour vous.

Comment Silktide teste cela

Simuler la navigation d’un utilisateur au clavier qui parcourt, par tabulation, chaque élément pouvant recevoir le focus, sur les vues bureau et mobile de la page.
Simuler le défilement vertical du navigateur amenant 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 recouvre l’élément focalisé. Les chevauchements avec des arrière‑plans transparents ou semi‑transparents sont ignorés, car l’indicateur de focus reste visible à travers eux.
Signaler l’élément s’il est complètement couvert par un élément opaque. Les recouvrements partiels ne sont pas signalés par ce contrôle - c’est ce que teste Focus non partiellement masqué.

Pourquoi nous simulons le défilement

La quantité de défilement effectuée par le navigateur entre deux pressions sur Tab varie selon la taille de la fenêtre. Ainsi, selon l’écran, un en‑tête fixe peut ou non recouvrir un élément au focus, parfois pour quelques pixels d’écart en hauteur seulement. Tester à une taille de fenêtre unique signalerait des problèmes que personne, avec une taille légèrement différente, ne pourrait reproduire.

À la place, Silktide évalue chaque élément comme s’il avait été fait défiler jusqu’au centre de l’écran. Cette approche volontairement généreuse signale des problèmes qui affectent toutes les tailles d’écran de manière cohérente 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, tant qu’elle est ouverte, le focus ne peut pas en sortir — ce qui correspond au comportement attendu d’une boîte de dialogue correctement conçue. Une boîte de dialogue défectueuse qui laisse le focus s’échapper derrière elle peut donc ne pas être signalée, sauf si elle est ouverte au chargement de la page.

Dépannage

Je vois bien l’élément au focus

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