Critère 12.8
Ordre de tabulation
L'ordre de tabulation doit être cohérent et suivre la logique visuelle de la page.
En Bref : L'essentiel à retenir
- L'accessibilité au clavier requiert un ordre de tabulation logique, suivant généralement la lecture de gauche à droite et de haut en bas.
- L'ordre de tabulation par défaut est basé sur l'ordre des éléments dans le code HTML, assurez-vous donc de la cohérence visuelle.
- L'utilisation de `order` en CSS (Flexbox, Grid) modifie l'affichage visuel sans affecter l'ordre de tabulation, ce qui peut causer des incohérences.
- Utilisez `tabindex='0'` pour rendre un élément focusable dans l'ordre naturel et `tabindex='-1'` pour le rendre focusable uniquement via JavaScript.
Objectif
Ne pas désorienter l'utilisateur qui navigue au clavier. Le focus doit se déplacer de manière logique (généralement de gauche à droite et de haut en bas).
Solution Technique
1. Ordre du DOM
L'ordre de tabulation suit l'ordre des éléments dans le code HTML. Assurez-vous que l'ordre du code correspond à l'ordre visuel.
2. Attention au CSS order et flex-direction
L'utilisation de order en Flexbox ou Grid modifie l'apparence visuelle mais PAS l'ordre de tabulation, ce qui peut créer une incohérence. Évitez de modifier l'ordre visuel massivement via CSS si cela casse la logique de lecture.
3. tabindex
- N'utilisez JAMAIS
tabindexpositif (ex:tabindex="1"). - Utilisez
tabindex="0"pour rendre un élément focusable dans l'ordre naturel. - Utilisez
tabindex="-1"pour rendre un élément focusable uniquement via JS (ex: pour une modale).