L’élément qui a le focus ne doit pas être masqué par un en-tête fixe ou un élément superposé

Quand un en-tête fixe, un bandeau cookies ou une bulle de chat recouvre l’élément qu’une personne vient d’atteindre au clavier, elle ne voit pas ce qui a le focus et risque d’activer le mauvais élément. Sur les longues pages de catégorie, cela peut se produire sur presque chaque rangée de produits.

Identifiant de la règle
vs-focus-obscured
Source
Contrôle Validiscan
Impact
Grave
Niveau de correction
ASSISTED
sur Shopify, Shopware, WooCommerce et Magento
Statut
exécutée

Ce que fait le contrôle

Détecte les éléments entièrement recouverts par un contenu fixe ou collant (sticky), comme un en-tête, un bandeau cookies ou un widget de chat, au moment où ils reçoivent le focus clavier (2.4.11).

Le contrôle prend jusqu’à 150 éléments atteignables au clavier, dans l’ordre du document, iframe compris, et écarte les valeurs négatives de tabindex ainsi que les éléments masqués, désactivés ou de taille nulle. Chacun reçoit un simple appel à focus(), qui fait défiler la page comme le focus clavier et respecte scroll-padding. Le contrôle s’exécute dans chaque zone d’affichage scannée, par défaut de 1440 et de 390 px de large.

Il teste ensuite neuf points : le centre, les coins et le milieu de chaque bord, placés jusqu’à 3 px en retrait des bords. Les points situés hors de la zone d’affichage sont ignorés. Un point est recouvert lorsque l’élément au premier plan à cet endroit est un conteneur position: fixed ou position: sticky, ou se trouve dans un tel conteneur, à condition que celui-ci ne contienne pas l’élément qui a le focus et ait une opacité effective d’au moins 0,1.

Lorsque tous les points testés sont recouverts, l’élément fait l’objet d’un constat qui nomme le conteneur recouvrant le plus de points. Un élément partiellement recouvert va dans « à examiner », car le contrôle ne peut pas savoir si la partie visible montre encore ce qui a le focus. Le scanner ne transforme pas aujourd’hui les résultats « à examiner » en constats.

Comment corriger

Réglez scroll-padding-top (et scroll-padding-bottom) sur la hauteur des en-têtes et des bandeaux fixes pour que les éléments qui reçoivent le focus défilent dans la zone visible, éloignez les boutons de chat et les bandeaux cookies du contenu de la page, et permettez aux visiteurs de fermer ou de réduire les éléments superposés.

Critères de succès WCAG

Clauses de la norme EN 301 549

La clause de la norme EN 301 549 pour chaque critère, selon la version de la norme
Critère WCAG Version 3.2.1 Version 4.1.1
2.4.11 aucune clause dans cette version 9.2.4.11

Commencez par une vérification gratuite de votre boutique.

Envoyez l’adresse de votre boutique. Validiscan la scanne et vous envoie chaque échec que le scan peut prouver, avec sa page et son code.

Demander une vérification gratuite

Ou écrivez à info@validiscan.com.

Ce que couvre la vérification gratuite, et ce qu’elle laisse de côté
Vous envoyez
l’adresse de votre boutique
Pages scannées
jusqu’à 15
Vous recevez
chaque échec que le scan peut prouver, avec la page et le code
Sur votre boutique
pages publiques uniquement ; aucune connexion, aucun achat, aucun formulaire envoyé
Ce qu’elle n’est pas
un audit complet

Écrire à Validiscan

Pour une vérification gratuite, indiquez l’adresse de votre boutique et sa plateforme.

Validiscan utilise ce que vous envoyez pour vous répondre. Politique de confidentialité