L'ordre de tabulation : logique et pièges

La touche Tab parcourt les éléments interactifs d’une page dans un ordre précis. Cet ordre n’est pas arbitraire, il suit des règles que le navigateur applique à partir du HTML. Comprendre ces règles permet de prédire le comportement, et de repérer les situations où l’ordre devient incohérent.

Comment Tab parcourt une page

Par défaut, Tab suit l’ordre du DOM, l’ordre dans lequel les éléments apparaissent dans le code HTML source, de haut en bas.

Seuls certains éléments reçoivent le focus par défaut :

• <a href="..."> : les liens avec un attribut href
• <button> : tous les boutons
• <input>, <select>, <textarea> : les champs de formulaire
• <details> : les éléments de disclosure natifs

Les <div>, <span>, <p>, <h2> et autres éléments non interactifs ne reçoivent pas le focus par défaut. Ils sont invisibles pour la touche Tab.

<!-- Ordre de tabulation dans ce code : 1 → 2 → 3 -->

<header>
  <a href="/">Logo</a>                    <!-- Tab 1 -->
  <nav>
    <a href="/mairie">Mairie</a>           <!-- Tab 2 -->
    <a href="/contact">Contact</a>         <!-- Tab 3 -->
  </nav>
</header>

<main>
  <h1>Bienvenue</h1>                      <!-- pas de focus -->
  <p>Texte de présentation.</p>           <!-- pas de focus -->
  <a href="/actualites">Actualités</a>    <!-- Tab 4 -->
</main>

Ce comportement naturel est suffisant dans la majorité des cas. Ne pas l’interférer est la meilleure décision par défaut.

tabindex : les trois valeurs et ce qu’elles font

L’attribut tabindex modifie ce comportement naturel. Il accepte trois types de valeurs, chacune avec un effet distinct.

tabindex="0" : rendre un élément focusable

Ajoute un élément non interactif dans le flux de tabulation naturel, à sa position dans le DOM.

<!-- Un div custom qui doit recevoir le focus -->
<div
  role="button"
  tabindex="0"
  onclick="basculer()"
  onkeydown="if(e.key==='Enter'||e.key===' ')basculer()"
>
  Ouvrir le menu
</div>

Quand l’utiliser : uniquement sur des éléments custom qui jouent un rôle interactif et qui ne peuvent pas être remplacés par un élément HTML natif. En pratique, si tu peux utiliser <button> ou <a>, c’est toujours préférable, ils viennent avec tabindex="0" implicite et le comportement clavier natif.

tabindex="-1" : focusable par programme, pas par Tab

L’élément ne reçoit pas le focus via Tab, mais peut recevoir le focus via JavaScript (element.focus()).

<!-- La modale ne reçoit pas le focus en tabulant normalement -->
<!-- Mais on peut y déplacer le focus programmatiquement à l'ouverture -->
<div role="dialog" tabindex="-1" id="modal">
  <h2>Confirmer la suppression</h2>
  <button>Oui</button>
  <button>Non</button>
</div>

<script>
  document.getElementById('modal').focus(); // déplace le focus à l'ouverture
</script>

Quand l’utiliser : sur les conteneurs de modales, les panneaux d’accordéon, les éléments qui doivent recevoir le focus programmatiquement mais pas lors d’une navigation Tab normale. Aussi sur les onglets non sélectionnés dans une interface à onglets (navigation aux flèches, pas à Tab).

tabindex positif : à ne presque jamais utiliser

Une valeur positive (tabindex="1", tabindex="2"…) place l’élément dans un flux de tabulation secondaire, parcouru en entier avant les éléments naturels.

<!-- Résultat : ordre 1 → 2 → 3 → puis tous les éléments sans tabindex -->
<header>
  <a href="/" tabindex="2">Logo</a>
  <a href="/mairie" tabindex="3">Mairie</a>
</header>
<main>
  <a href="/actus" tabindex="1">Actualités</a>  <!-- passe EN PREMIER -->
  <p>Texte avec <a href="/lien">un lien</a>.</p> <!-- passe EN DERNIER -->
</main>

L’ordre réel de tabulation dans cet exemple :

1. “Actualités” (tabindex=“1”) : en bas de page mais passe en premier
2. “Logo” (tabindex=“2”)
3. “Mairie” (tabindex=“3”)
4. “un lien” : dans le texte, sans tabindex, passe tout à la fin

C’est contre-intuitif et difficile à maintenir. Dès qu’un seul élément a tabindex="1", il passe en tête, même s’il est physiquement au bas de la page. Et si on ajoute plus tard un autre élément avec tabindex="1", les deux se retrouvent en tête dans l’ordre du DOM relatif.

La règle : n’utiliser tabindex positif dans aucun cas. Si l’ordre de tabulation est mauvais, corriger l’ordre du DOM.

Quand l’ordre visuel diverge de l’ordre DOM

C’est la source la plus courante d’incohérence dans l’ordre de tabulation. Le CSS peut réorganiser visuellement des éléments sans changer leur position dans le HTML, et c’est le HTML qui dicte l’ordre de tabulation, pas l’apparence.

Flexbox et order

.menu { display: flex; }
.menu-logo { order: 1; }
.menu-nav  { order: 2; }
.menu-cta  { order: 3; }

<!-- Ordre visuel : Logo → Nav → CTA -->
<!-- Ordre DOM (et donc Tab) : CTA → Logo → Nav -->
<div class="menu">
  <div class="menu-cta"><a href="/contact">Contact</a></div>
  <div class="menu-logo"><a href="/">Logo</a></div>
  <div class="menu-nav"><a href="/mairie">Mairie</a></div>
</div>

L’utilisateur voit “Logo → Nav → CTA” à l’écran, mais Tab suit “CTA → Logo → Nav”. Déroutant pour tout utilisateur clavier.

Correction : réorganiser le HTML pour que l’ordre du DOM corresponde à l’ordre visuel logique. Utiliser order en CSS seulement pour des ajustements mineurs qui ne perturbent pas la logique de lecture.

CSS Grid et grid-area

Même problème avec Grid. Une mise en page qui place la barre latérale à gauche visuellement mais la déclare après le contenu principal dans le HTML produit un ordre Tab qui visite le contenu principal avant la sidebar, ce qui peut être voulu ou non selon la logique de la page.

<!-- Le footer est déclaré avant le <main> dans le DOM -->
<!-- CSS le place en bas, mais Tab le visite en premier -->
<div class="layout">
  <footer>Pied de page</footer>  <!-- Tab visite ici en premier -->
  <main>Contenu principal</main> <!-- Tab visite ici en second -->
</div>

Cette situation est une non-conformité directe sur le critère 12.8.

position: absolute et fixed

Les éléments positionnés en absolu ou en fixe restent à leur position dans le DOM. Un bouton “Retour en haut” positionné en fixed en bas à droite mais déclaré en tête du HTML sera le premier élément à recevoir le focus par Tab.

<!-- ✗ Déclaré en premier dans le DOM, apparaît en bas visuellement -->
<button class="back-to-top" style="position:fixed;bottom:1rem;right:1rem">
  ↑ Retour en haut
</button>

<header>...</header>
<main>...</main>

Tab ordre : ”↑ Retour en haut” → éléments du header → éléments du main.

Correction : déplacer l’élément à la fin du HTML, ou utiliser tabindex="-1" et le rendre focusable seulement quand il est visible (via JavaScript).

Comment vérifier l’ordre de tabulation

Trois méthodes, de la plus rapide à la plus précise.

Méthode 1 : Tab manuel (toujours faire ça en premier)

Ouvrir la page, cliquer sur la barre d’adresse du navigateur, puis appuyer sur Tab répétitivement. Observer :

• Chaque Tab déplace-t-il le focus vers un élément visible et logiquement suivant ?
• L’ordre correspond-il à l’ordre de lecture naturel de la page ?
• Y a-t-il des sauts qui semblent aléatoires ?
• Y a-t-il des éléments qui semblent focusables mais ne reçoivent jamais le focus ?

Méthode 2 : ARC Toolkit (visualisation)

L’extension ARC Toolkit (Chrome) a une fonctionnalité “Tab Order” qui numérote chaque élément focusable sur la page avec l’ordre dans lequel Tab les visitera. Très utile pour les pages complexes où le Tab manuel est difficile à suivre.

Méthode 3 : Inspecteur DOM + arbre d’accessibilité

Pour un élément spécifique dont l’ordre semble suspect :

1. Ouvrir les DevTools (F12)
2. Inspecter l’élément
3. Vérifier sa position dans le DOM par rapport aux éléments qui le précèdent et le suivent visuellement
4. Vérifier si un tabindex modifie son comportement (visible dans l’onglet Accessibility des DevTools)

Récapitulatif : Les règles à retenir

Critère RGAA 12.8 : Dans chaque page web, l’ordre de tabulation est-il cohérent ?

Un ordre incohérent est souvent invisible pour les testeurs qui utilisent la souris et n’est révélé qu’au test clavier. C’est pourquoi le test Tab manuel est la première vérification à faire sur toute page livrée.