Piège au clavier
Un piège au clavier se produit quand le focus entre dans un composant de la page et ne peut plus en sortir avec les touches habituelles (Tab, Échap, flèches). L'utilisateur est bloqué : impossible de continuer sans souris. Le critère 2.1.2 des WCAG (niveau A) interdit cette situation.
Vous ouvrez une modale, vous appuyez sur Tab pour atteindre le bouton « Fermer ». Rien. Tab encore. Le focus tourne en boucle entre deux éléments à l'intérieur. Impossible de sortir.
Pour un utilisateur qui ne peut pas utiliser la souris, la seule option restante est de recharger la page.
#Ce que les WCAG interdisent
Le critère 2.1.2 des WCAG (niveau A) pose une règle simple : si le focus peut entrer dans un composant, il doit pouvoir en sortir au clavier. Si la sortie nécessite autre chose que Tab ou les touches fléchées, l'utilisateur doit en être informé à l'avance.
Ce critère fait partie des exigences de non-interférence : même un contenu exempté d'accessibilité ne peut pas créer de piège au clavier. C'est l'un des quatre critères que tout contenu web doit respecter, sans exception.
#Les causes les plus courantes
Les pièges au clavier viennent rarement du HTML natif. Ce sont les composants personnalisés qui posent problème :
- Modales en
<div>sans gestion clavier : le focus entre dans la modale, mais aucun bouton de fermeture n'est atteignable au clavier - Widgets tiers (carrousels, lecteurs vidéo, éditeurs WYSIWYG) qui interceptent les événements clavier sans les restituer
- Défilement infini qui force à tabuler à travers des centaines d'éléments avant d'atteindre le contenu suivant
Le guide du développeur RGAA insiste : vérifiez que chaque composant interactif permet de tabuler vers l'élément suivant et l'élément précédent.
#Confinement de focus et piège : la distinction
Confiner le focus dans une modale ouverte n'est pas un piège. C'est un comportement attendu, à condition que l'utilisateur puisse fermer la modale (touche Échap, bouton Fermer accessible au clavier).
L'élément HTML <dialog> gère ce confinement nativement avec showModal(). Le navigateur empêche le focus de sortir de la modale, et Échap la ferme. Pas besoin de JavaScript supplémentaire pour le focus trapping.
Si vous construisez encore vos modales avec des <div>, c'est là que les pièges se créent.
#En résumé
Testez au clavier : entrez dans chaque composant interactif avec Tab, et vérifiez que vous pouvez en sortir sans souris. Utilisez <dialog> pour vos modales. Et si un composant nécessite une touche non standard pour quitter, affichez cette information à l'utilisateur.