Keyboard trap
K
Definition complete
Un keyboard trap (piege clavier) est une erreur d'accessibilite critique ou l'utilisateur navigant au clavier se retrouve bloque dans un element interactif sans possibilite d'en sortir. Cette situation rend le site inutilisable pour les personnes ne pouvant utiliser une souris, violant le critere WCAG 2.1.1 (niveau A).
Les causes frequentes incluent les modales mal implementees (pas de bouton fermer accessible, touche Echap non geree), les widgets JavaScript complexes (carousels, lecteurs video, editeurs WYSIWYG), les iframes qui captent indefiniment le focus, et les menus dropdown sans gestion du focus clavier.
La solution implique plusieurs techniques : gerer l'evenement clavier Echap pour fermer les modales, implementer un focus trap intentionnel dans les modales (le Tab cycle dans la modale sans en sortir), restaurer le focus a l'element declencheur a la fermeture, et toujours fournir un moyen visible de quitter l'element.
Les tests d'accessibilite doivent systematiquement verifier qu'on peut naviguer dans tout le site avec Tab et Shift+Tab sans jamais etre bloque. Les lecteurs d'ecran comme JAWS et NVDA signalent egalement ces problemes.
Exemples pratiques
- Modal piege : Fenetre de connexion ou Tab fait cycler indefiniment entre email et mot de passe sans pouvoir sortir
- Widget chat : Fenetre de chat en bas de page qui capture le focus et ne le libere jamais
- Lecteur video : iframe YouTube ou le focus reste coince dans les controles video
- Solution : Ajout de
onKeyDowngerant Echap et focus trap avecinertsur le reste de la page
A quoi sert Keyboard trap ?
L'elimination des keyboard traps est obligatoire pour la conformite WCAG niveau A, les sites publics soumis aux obligations legales d'accessibilite, les applications web professionnelles utilisees par des personnes handicapees, et tout site visant une experience inclusive.
Keyboard trap en pratique chez 123web
Chez 123web, nous auditons systematiquement la navigation clavier de vos sites. Nous testons chaque element interactif pour garantir l'absence de pieges clavier et une accessibilite conforme aux standards WCAG.