Ordre de tabulation

L'ordre de tabulation est la séquence dans laquelle les éléments interactifs d'une page reçoivent le focus quand on appuie sur Tab. Par défaut, il suit l'ordre du code HTML. Si cet ordre ne correspond pas à l'ordre visuel de la page, les utilisateurs au clavier se retrouvent désorientés.

Appuyez sur Tab. Le focus saute au premier lien, puis au deuxième, puis au bouton du formulaire. Cette séquence, c'est l'ordre de tabulation. Elle suit l'ordre des éléments dans votre code HTML, pas leur position visuelle à l'écran.

Quand les deux correspondent, personne ne s'en aperçoit. Quand ils divergent, la navigation au clavier devient un labyrinthe.

#Ce que le navigateur fait par défaut

Le navigateur parcourt les éléments focusables (liens, boutons, champs de formulaire) dans l'ordre où ils apparaissent dans le DOM. Un HTML bien structuré produit un ordre de tabulation logique sans configuration.

Le critère 2.4.3 des WCAG (niveau A) demande que cet ordre préserve le sens et l'opérabilité du contenu. Le RGAA reprend cette exigence dans le critère 12.8.

La règle tient en une phrase : l'ordre du DOM doit correspondre à l'ordre de lecture visuel.

#Le piège du CSS order

Flexbox et Grid permettent de réorganiser l'affichage sans toucher au HTML. La propriété order déplace un élément visuellement, mais le navigateur continue de tabuler selon le DOM :

/* La sidebar s'affiche en premier, mais le focus l'atteint en dernier */
.sidebar { order: -1; }

L'utilisateur voit la sidebar à gauche, appuie sur Tab, et le focus saute au contenu principal. Décalage immédiat. Pour corriger, déplacez l'élément dans le HTML plutôt que de compenser avec CSS.

#Pourquoi tabindex positif est interdit

L'attribut tabindex accepte des valeurs positives (1, 2, 3…). Ces éléments reçoivent le focus avant tous les autres, quelle que soit leur position dans le DOM. Sur une page de 50 éléments interactifs, un seul tabindex="1" suffit à casser toute la logique de navigation.

Le A11Y Project résume : n'utilisez que deux valeurs.

<!-- tabindex="0" : inclus dans l'ordre naturel du DOM -->
<div role="button" tabindex="0">Action</div>
 
<!-- tabindex="-1" : focusable uniquement via JavaScript -->
<main id="contenu" tabindex="-1">…</main>

tabindex="0" rend un élément focusable à sa place dans le DOM. tabindex="-1" le retire de l'ordre de tabulation mais permet de lui envoyer le focus via JavaScript, pour les cibles de liens d'évitement ou les modales.

#En résumé

Structurez votre HTML dans l'ordre de lecture. Évitez de réorganiser l'affichage avec CSS order quand cela casse la logique de tabulation. N'utilisez jamais tabindex avec une valeur positive. Et testez : appuyez sur Tab et naviguez votre page. Si le parcours vous surprend, il surprendra vos utilisateurs aussi.