Repérer les pièges du clavier

Un piège clavier est un endroit où le focus peut entrer, mais dont il est impossible de sortir avec le clavier. Pour un utilisateur sans souris, c’est une impasse. 🪤

Un utilisateur bloqué devra peut-être recharger toute la page pour s’échapper. WCAG considère un piège sans issue comme un échec, et non comme un simple défaut.

Les pièges aiment les composants riches : sélecteurs de date personnalisés, éditeurs intégrés et modules tiers qui s’emparent du focus sans jamais le rendre.

Une boîte de dialogue qui intercepte Tabulation sans offrir de moyen d’en sortir est le piège le plus courant. Une véritable fenêtre modale doit se fermer avec Échap.

Un contenu intégré comme une vidéo ou une carte se trouve dans une iframe. Certains de ces contenus s’emparent du focus et laissent l’utilisateur tourner en rond sans issue.

Un script qui appelle preventDefault sur la touche Tabulation peut bloquer le déplacement normal du navigateur. Soudain, le focus refuse simplement d’avancer.

Certains pièges permettent à Tabulation d’avancer, mais bloquent Maj+Tabulation. Testez les deux directions : un parcours à sens unique reste un piège.

Maintenir le focus dans une fenêtre modale ouverte est volontaire et correct. La règle est de toujours fournir une issue claire, comme Échap ou un bouton de fermeture.

Le test est direct et efficace. Parcourez toute la page avec Tabulation, en utilisant uniquement le clavier, et ne prenez jamais la souris pour vous échapper.

Si le focus tourne continuellement dans un seul composant et que Tabulation ne vous permet pas de continuer, vous avez trouvé un piège. Notez précisément l’endroit où vous êtes bloqué.

La solution consiste à rétablir une issue : laissez Tabulation continuer, respectez Échap et, à la fermeture, rendez le focus à la commande qui a ouvert la couche.

Un piège retient le focus sans issue au clavier et constitue un échec vis-à-vis de WCAG. Parcourez tout dans les deux directions avec Tabulation et fournissez toujours un chemin de sortie. ✅