Le focus clavier ne doit jamais rester piégé
Un piège au clavier bloque complètement le client : une fois le focus coincé dans un widget comme un lecteur vidéo, une fenêtre de chat ou un champ de paiement intégré, il ne peut plus atteindre le reste de la page ni le bouton de paiement, et la seule issue est de quitter la boutique.
- Identifiant de la règle
- vs-keyboard-trap
- Source
- Contrôle Validiscan
- Impact
- Critique
- Niveau de correction
- MANUAL
- sur Shopify, Shopware, WooCommerce et Magento
- Statut
- exécutée
Ce que fait le contrôle
Suit la séquence de tabulation et détecte les boucles et les impasses où le focus clavier ne peut ni passer au-delà d’un composant, ni en ressortir (2.1.2).
Le contrôle classe les éléments visibles et atteignables au clavier dans l’ordre de tabulation : d’abord les valeurs positives de tabindex, par ordre croissant, puis l’ordre du document. Il donne le focus au premier élément qui l’accepte, puis appuie jusqu’à 200 fois sur la touche Tab. Si le focus quitte le document, ou si les appuis sont épuisés, rien n’est signalé.
Il y a impasse lorsque le focus reste sur le même élément pendant 8 appuis consécutifs. Sur un iframe, un object ou un embed, le contrôle fait passer le focus au-delà de l’élément après 3 appuis ; les pièges qu’il contient ne sont donc pas signalés. Il y a boucle lorsque le focus revient sur un élément déjà visité. Une boucle qui contient le premier élément ayant reçu le focus et soit le dernier élément de la séquence de tabulation, soit au moins 80 % des éléments de cette séquence, est un parcours complet ; les autres boucles sont signalées sur leur conteneur commun le plus proche.
Le contrôle appuie ensuite sur Échap et sur Tab. Un piège dont on sort avec Échap, ou tout piège situé dans un élément dialog, role="dialog", role="alertdialog" ou aria-modal="true", va dans « à examiner », que le scanner ne transforme pas aujourd’hui en constats. Maj+Tab n’est pas testé.
Comment corriger
Repérez le composant qui capture le focus (souvent un widget tiers ou une fenêtre modale personnalisée) et assurez-vous que Tab et Shift+Tab permettent d’en sortir, ou qu’Escape le ferme et rend le focus à la page. Après la modification, parcourez à la main tout le chemin au clavier.
Critères de succès WCAG
- 2.1.2 No Keyboard Trap, niveau A
Clauses de la norme EN 301 549
| Critère WCAG | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.1.2 | 9.2.1.2 | 9.2.1.2 |
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