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
- 2.4.11 Focus Not Obscured (Minimum), niveau AA
Clauses de la norme EN 301 549
| 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 gratuiteOu é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