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

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.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 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é