En naviguant à la touche Tab, le focus se déplace-t-il dans un ordre logique — de haut en bas, de gauche à droite — qui correspond à l'ordre visuel de lecture ?
Critère officiel 12.8 — Dans chaque page web, l’ordre de tabulation est-il cohérent ?
Pourquoi c'est important
Un focus qui saute de façon imprévisible — de la barre latérale au pied de page, puis remonte au menu — désorganise totalement les utilisateurs au clavier. Sans repère visuel d'ensemble, ils dépendent entièrement d'un ordre prévisible pour comprendre où ils en sont dans la page.
Exemples concrets
Ce qui est conforme
En appuyant sur Tab depuis le début de la page, le focus suit logiquement : lien d'évitement → menu → contenu principal → liens dans l'article → pied de page. L'ordre correspond à l'ordre visuel de lecture de haut en bas.
Ce qui pose problème
Sur une page avec une barre latérale, le focus passe du menu à la barre latérale entière avant d'atteindre le contenu principal — parce que la barre est codée avant le contenu dans le fichier HTML. L'utilisateur parcourt des liens latéraux avant même d'atteindre le titre de l'article.
Comment agir
Test : naviguez à Tab sur vos pages principales et vérifiez que le focus suit l'ordre visuel logique. Si le focus fait des sauts incohérents, c'est que l'ordre du code source diffère de l'ordre visuel — la même cause que le critère 10.3. Signalez à votre prestataire en précisant l'ordre observé.
Règles clés
- Ne jamais utiliser tabindex avec une valeur positive (> 0). Deux valeurs seulement sont légitimes : tabindex="0" (ajouter un élément non interactif au flux de tabulation) et tabindex="-1" (retirer du flux, focus géré par script).
- L'ordre DOM doit refléter l'ordre logique de lecture — les CSS ne doivent pas créer une inversion significative entre ordre visuel et ordre de tabulation.
- Test pratique : désactiver les CSS et lire la page linéairement. L'ordre des éléments est-il logique ?
- Pour les composants dynamiques (modals, alertes, résultats de recherche), gérer le focus programmatiquement après toute modification du DOM.
Erreurs fréquentes
- tabindex positifs (tabindex="1", tabindex="2"…) qui créent un ordre artificiel difficile à maintenir
- Mise en page CSS qui inverse l'ordre DOM/visuel (flex order, grid avec placement explicite, float + clear)
- Contenu inséré dynamiquement (résultats de recherche, filtres) sans gestion du focus après insertion
- Skip links (liens d'évitement) positionnés après le contenu qu'ils sont censés sauter dans le DOM
- Modal ajoutée en fin de DOM mais affichée visuellement au centre — le focus y arrive en dernier lors d'une tabulation séquentielle
Exemples de code
tabindex positifs
✗ Non conforme<nav>
<a href="/" tabindex="3">Accueil</a>
<a href="/services" tabindex="1">Services</a>
<a href="/contact" tabindex="2">Contact</a>
</nav>L'ordre de tabulation devient Services (1) → Contact (2) → Accueil (3), au lieu de l'ordre DOM (Accueil → Services → Contact). Déroutant et difficile à maintenir.
tabindex positifs — correction
✓ Conforme<nav>
<a href="/">Accueil</a>
<a href="/services">Services</a>
<a href="/contact">Contact</a>
</nav>Sans tabindex, l'ordre DOM naturel s'applique — logique et prévisible. Si l'ordre visuel doit différer de l'ordre DOM, réorganiser le HTML plutôt que d'utiliser tabindex.
inversion CSS flex order
✗ Non conforme<!-- DOM : aside avant main -->
<div style="display: flex;">
<aside style="order: 2;">Sidebar</aside>
<main style="order: 1;">Contenu principal</main>
</div>Visuellement, le contenu principal apparaît en premier (order: 1). Mais la tabulation suit l'ordre DOM : elle passe d'abord dans la sidebar — l'inverse de l'ordre visuel et de l'ordre logique.
ordre DOM cohérent avec l'ordre visuel
✓ Conforme<!-- DOM dans l'ordre logique de lecture -->
<div style="display: flex;">
<main>Contenu principal</main>
<aside>Sidebar</aside>
</div>L'ordre DOM correspond à l'ordre visuel souhaité. Pas besoin de CSS order. Si la sidebar doit apparaître visuellement avant le main, reconsidérer si cet ordre visuel est lui-même logique.
Référence WCAG : 2.4.3