C'est quoi
Le critère RGAA 12.8 exige que l'ordre de tabulation soit cohérent, c'est-à-dire qu'il suive une progression logique reflétant l'ordre de lecture et la structure visuelle de la page.
La cause la plus fréquente d'incohérence est l'utilisation de tabindex avec des valeurs positives (supérieures à zéro). Ces valeurs créent une file de priorité séparée du flux normal du DOM, ce qui dérègle l'ordre naturel.
Le critère correspond à WCAG 2.4.3 (Ordre du focus, niveau A).
Les éléments avec tabindex="0" s'insèrent dans l'ordre du DOM, ce qui est correct. Les éléments avec tabindex="-1" sont retirés de la tabulation naturelle et ne peuvent être focalisés que par script, ce qui est aussi acceptable.
Qui est touché
- Les personnes ne pouvant pas utiliser une souris et qui naviguent exclusivement au clavier : un ordre chaotique les oblige à parcourir l'intégralité de la page pour retrouver leur position.
- Les personnes aveugles utilisant un lecteur d'écran : le focus et l'annonce vocale suivent l'ordre de tabulation. Un saut inattendu crée une désorientation immédiate.
- Les personnes avec des troubles moteurs utilisant un contacteur de bascule : elles avancent lentement, un élément à la fois. Chaque saut inattendu coûte du temps et de l'énergie.
Impact business
Un ordre de tabulation incohérent rend une page difficilement utilisable pour quiconque navigue au clavier. Les menus, les formulaires et les dialogues modaux sont les zones les plus sensibles.
Dans un formulaire en plusieurs étapes, un mauvais tabindex peut faire sauter le focus à la dernière étape avant que l'utilisateur ait rempli la première. Le formulaire devient pratiquement inutilisable.
Cette erreur est souvent introduite par des thèmes ou des constructeurs de
pages qui ajoutent des valeurs tabindex positives pour résoudre un problème
de focus visuel, sans mesurer l'impact sur la navigation clavier globale.
Comment le détecter
- Audit Mynto : le scan détecte la présence d'attributs
tabindexsupérieurs à zéro dans le code source. - Manuel : navigue sur la page en utilisant uniquement la touche Tab. L'ordre doit être prévisible - de gauche à droite, de haut en bas, en suivant la logique visuelle. Tout saut inattendu signale un problème.
- Dans les DevTools, recherche
tabindexdans le HTML. Toute valeur positive (tabindex="1", "2", "10", etc.) est suspecte.
Comment corriger
<!-- tabindex positifs qui dérèglent l'ordre -->
<button tabindex="3">Envoyer</button>
<input type="text" tabindex="1" id="nom">
<input type="email" tabindex="2" id="email"><!-- Ordre naturel du DOM, tabindex retiré -->
<input type="text" id="nom">
<input type="email" id="email">
<button>Envoyer</button>La correction consiste à supprimer tous les attributs tabindex avec des
valeurs positives et à réorganiser les éléments dans le DOM dans l'ordre
logique souhaité.
L'ordre de tabulation suit l'ordre du DOM. Si tu veux qu'un champ soit focalisé avant un autre, place-le avant dans le HTML.
tabindex="0" : inclut un élément non interactif (comme un <div>) dans
la tabulation naturelle. Utile pour les widgets personnalisés.
tabindex="-1" : retire un élément de la tabulation mais permet de le
focaliser par script (element.focus()). Utile pour gérer le focus dans
les modales et menus.
Note : supprimer un tabindex positif est sûr et peut se faire automatiquement. Réorganiser l'ordre des éléments dans le DOM demande en revanche une vérification manuelle, car déplacer des nœuds dans le HTML rendu par un constructeur de pages peut casser la mise en page.
Sur WordPress, vérifie les thèmes et plugins qui modifient le HTML rendu. Certains constructeurs comme Elementor ou Divi ajoutent parfois des tabindex positifs sur leurs wrappers.
Questions fréquentes
tabindex="0" est-il autorisé ?
Oui. tabindex="0" insère un élément dans l'ordre naturel du DOM. C'est la valeur correcte pour rendre un élément non interactif (div, span) accessible au clavier dans les widgets personnalisés.
Peut-on utiliser tabindex pour corriger un mauvais ordre visuel ?
Non. Si l'ordre visuel ne correspond pas à l'ordre du DOM, la bonne solution est de revoir le HTML ou le CSS (flexbox order, grid). Les valeurs tabindex positives créent plus de problèmes qu'elles n'en résolvent.
Comment vérifier l'ordre de tabulation rapidement ?
Charge la page, clique en dehors de tout élément interactif, puis appuie sur Tab à répétition. Note l'ordre dans lequel les éléments reçoivent le focus. L'extension "Accessibility Insights for Web" (fonction Tab stops) permet aussi de visualiser l'ordre directement sur la page.
À lire aussi
Cette erreur est-elle sur ton site ?
Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.