Ordre de tabulation incohérent
Le problème
Un ordre de tabulation incohérent se produit lorsque l'ordre dans lequel les éléments interactifs reçoivent le focus clavier ne correspond pas à l'ordre visuel logique de la page. Le critère RGAA 12.8 (correspondant au WCAG 2.4.3, niveau A) exige que l'ordre de navigation au clavier soit logique et cohérent avec l'ordre de présentation du contenu.
Ce problème est principalement causé par : l'utilisation de valeurs positives de tabindex (tabindex="5", tabindex="10") qui forcent un ordre de focus arbitraire, des mises en page CSS (flexbox avec order, grid, position: absolute) qui réordonnent visuellement les éléments sans modifier l'ordre DOM, et du contenu dynamiquement injecté qui apparaît visuellement avant des éléments qui le précèdent dans le DOM.
L'utilisation de tabindex avec des valeurs positives est l'anti-pattern le plus dangereux : elle crée un ordre de focus parallèle difficilement maintenable et souvent incohérent avec l'ordre visuel. Seules les valeurs tabindex="0" (ajouter au flux naturel) et tabindex="-1" (focalisable par script mais pas par Tab) sont recommandées.
Impact sur les utilisateurs
Pour les utilisateurs de clavier, un ordre de tabulation incohérent est profondément désorientant. Ils appuient sur Tab et au lieu d'avancer logiquement de gauche à droite et de haut en bas, le focus saute aléatoirement à travers la page -- d'un formulaire en bas à un lien en haut, puis à un bouton dans la barre latérale.
Les utilisateurs de lecteurs d'écran sont doublement affectés : non seulement l'ordre de tabulation est incohérent, mais l'ordre de lecture du contenu (basé sur le DOM) peut aussi différer de l'ordre visuel, créant une double confusion entre ce qu'un utilisateur voyant décrirait et ce que le lecteur d'écran annonce.
Ce problème rend les formulaires multi-champs particulièrement pénibles : au lieu de passer du champ nom au champ prénom puis email, le focus peut sauter au bouton d'envoi puis revenir au téléphone. L'utilisateur perd le fil et fait des erreurs.
Votre site a-t-il ce problème ?
106 critères RGAA analysés en 5 minutes par notre IA.
Exemple de code
<!-- Tabindex positifs qui brisent l'ordre naturel -->
<input tabindex="3" placeholder="Email">
<input tabindex="1" placeholder="Prénom">
<input tabindex="2" placeholder="Nom">
<button tabindex="4">Envoyer</button>
<!-- Mise en page CSS qui inverse l'ordre visuel -->
<div style="display: flex; flex-direction: row-reverse;">
<button>Suivant</button> <!-- Visuellement à droite -->
<button>Précédent</button> <!-- Visuellement à gauche -->
<!-- Mais le focus va à Suivant d'abord -->
</div><!-- Ordre DOM = ordre visuel, pas de tabindex -->
<input placeholder="Prénom">
<input placeholder="Nom">
<input placeholder="Email">
<button>Envoyer</button>
<!-- Ordre DOM cohérent avec l'affichage -->
<div style="display: flex;">
<button>Précédent</button>
<button>Suivant</button>
</div>Comment Scrutia détecte ce problème
Scrutia parcourt chaque page au clavier en simulant des appuis Tab et vérifie que l'ordre de focus correspond à l'ordre visuel logique. Il signale les éléments avec des valeurs tabindex positives, les mises en page CSS qui inversent l'ordre visuel par rapport au DOM, et les sauts de focus incohérents. Le rapport affiche l'ordre de tabulation actuel et l'ordre attendu.
Questions fréquentes
Peut-on utiliser tabindex avec des valeurs positives ?
Comment gérer l'ordre quand CSS réorganise visuellement le contenu ?
L'ordre de tabulation doit-il être strictement gauche-droite, haut-bas ?
Comment gérer le focus dans les composants dynamiques ?
Votre site a-t-il ce problème ?
Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.
Lancer un audit gratuit