Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →
Barrierefreiheit
Qu'est-ce qu'un piège au clavier sur un site web ?
Un piège au clavier est un endroit sur un site web où le focus reste bloqué : celui qui le rencontre avec la touche de tabulation ne peut pas en sortir avec le clavier seul. Pour les personnes sans souris, le site prend fin à cet endroit — continuer la lecture, commander ou soumettre le formulaire est impossible. Les déclencheurs courants sont les sélecteurs de date, les fenêtres de chat, les vidéos intégrées et les galeries d'images. Le critère WCAG 2.1.2 interdit ces pièges.
Comment se crée un piège au clavier
La plupart des pièges au clavier ne sont pas construits intentionnellement. Ils proviennent de composants prêts à l'emploi de tiers : un sélecteur de date capture le focus pour que ses jours de calendrier soient accessibles via les flèches — et oublie la sortie. Une fenêtre de chat maintient la marque dans son champ de saisie. Une boîte de dialogue faite maison sans bouton de fermeture laisse le focus circuler entre ses deux boutons. Avec la souris, on ne le remarque jamais, car les utilisateurs de souris cliquent simplement ailleurs. C'est exactement pourquoi les pièges au clavier restent souvent non détectés pendant des mois, tandis que les utilisateurs de clavier abandonnent le site au même endroit.
Comment le service de contrôle mesure le piège au clavier
Le service de contrôle appuie véritablement sur la touche de tabulation sur votre page et enregistre chaque arrêt avec la position et l'élément. Si la marque circule entre les mêmes quelques éléments sans atteindre la fin du document, il considère cela comme un piège au clavier. Le rapport nomme les éléments impliqués et joint une capture d'écran de preuve. Si le focus circule dans un cadre intégré tiers, le rapport note le cas pour vérification manuelle — là , on ne peut pas décider automatiquement s'il y a une sortie. Si la mesure atteint la fin du document sans circulation, le critère est considéré comme satisfait.
Beispiele
Dialog ohne Ausgang
<div role="dialog" aria-modal="true">
<p>Newsletter?</p>
<input type="email">
<!-- kein Schließen-Knopf, Escape ohne Wirkung -->
</div><dialog id="nl">
<p>Newsletter?</p>
<input type="email">
<button type="button" onclick="nl.close()">Schließen</button>
</dialog>
<!-- dialog schließt mit Escape von selbst -->Aus jedem Bereich muss die Tastatur wieder herauskommen: mit Tab, Escape oder einem beschriebenen Weg.
- Naviguez complètement à travers votre page d'accueil jusqu'à la zone de pied de page — si vous vous bloquez quelque part, vous avez trouvé le piège.
- Testez chaque nouvel élément tiers intégré individuellement : sélecteur de date, fenêtre de chat, carrousel, lecteur vidéo.
- Demandez à votre agence de donner à chaque boîte de dialogue une option de fermeture accessible au clavier, au minimum la touche Échap.
- Testez à nouveau après chaque mise à jour des composants intégrés — une nouvelle version peut introduire un piège.