Focus non partiellement masqué

Silktide vérifie que lorsqu’une commande est sélectionnée au clavier, aucune de ses parties n’est cachée derrière d’autres contenus, comme un bandeau de cookies ou un en-tête fixe. Même une commande partiellement recouverte peut laisser un utilisateur au clavier incertain de sa position sur la page.

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

Bandeaux en haut ou en bas de page, comme les avis de cookies
Barres de navigation et pieds de page fixes (sticky)
Boîtes de dialogue pop-up qui laissent le focus se déplacer derrière elles

Il s’agit de la version de niveau AAA (critère 2.4.12) de Focus non masqué : la vérification de ne signale que les commandes complètement recouvertes, tandis que celle-ci signale tout recouvrement, même partiel.

Pourquoi c’est important

Les personnes qui naviguent au clavier suivent l’indicateur de pour savoir sur quelle commande elles se trouvent. Quand une partie d’une commande focalisée disparaît sous un bandeau de cookies ou un pied de page fixe, l’utilisateur peut manquer l’indicateur, mal lire le libellé de la commande, ou perdre sa position — et une commande partiellement recouverte sur votre écran peut être totalement masquée sur un écran plus petit.

Comment corriger

Préférez du contenu qui défile avec la page plutôt que des éléments fixés par-dessus.
Là où un bandeau ou en-tête fixe doit rester, utilisez les propriétés CSS scroll-padding ou scroll-margin afin que les éléments focalisés défilent au-delà de celui-ci — voir Technique WCAG C43.
Pour les boîtes de dialogue et pop-ups, 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 clavier qui parcourt par tabulation chaque élément focalisable, 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 se trouve au-dessus de l’élément focalisé. Les éléments qui se chevauchent avec des arrière-plans transparents ou semi-transparents sont ignorés, car l’indicateur de focus reste visible à travers eux.
Signaler la commande si une partie quelconque est recouverte par un élément opaque. Si vous ne devez satisfaire qu’au niveau AA, les cas entièrement recouverts sont ceux que Focus non masqué signale.

Pourquoi nous simulons le défilement

La quantité de défilement qu’effectue un navigateur entre deux pressions sur Tab varie avec la taille de la fenêtre ; ainsi, le fait qu’un en-tête fixe couvre un élément focalisé peut différer entre des écrans dont la hauteur ne varie que de quelques pixels. Tester à une taille de fenêtre exacte signalerait des problèmes qu’aucune personne avec une fenêtre légèrement différente ne pourrait reproduire.

À la place, Silktide évalue chaque élément comme s’il avait été défilé 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 concernent 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 la quitter — ce qui correspond au comportement d’une boîte de dialogue correctement conçue. Une boîte de dialogue défaillante qui laisse le focus s’échapper derrière elle peut donc ne pas être signalée, à moins qu’elle ne soit ouverte au chargement de la page.

Dépannage

Je vois très bien l’élément focalisé

Vérifiez avec 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 masqué de manière significative, vous pouvez ignorer ce constat.