La différence entre focus order et tab order sur un formulaire complexe

L’ordre de tabulation (l’enchaînement des éléments atteints en pressant Tab) et l’ordre visuel (la disposition à l’écran, de haut en bas et de gauche à droite) sont deux notions distinctes qui coïncident naturellement dans un document simple, mais qui peuvent diverger dès qu’une mise en page utilise des grilles ou du positionnement CSS avancé. Cette divergence ne se voit pas à l’écran : elle ne se révèle qu’en testant réellement la navigation au clavier.

Ce que détermine réellement l’ordre du DOM

Par défaut, sans attribut tabindex particulier, l’ordre de tabulation suit exactement l’ordre dans lequel les éléments apparaissent dans le document HTML source, tel qu’il est écrit avant toute mise en forme. Le CSS peut repositionner visuellement un élément n’importe où sur la page, sans que cela ne change en rien sa place dans cet ordre de tabulation, puisque le CSS agit sur le rendu, pas sur la structure du document.

Un formulaire de devis d’assurance en deux colonnes

Prenons un formulaire de devis auto avec deux colonnes visuelles : à gauche les informations sur le conducteur, à droite les informations sur le véhicule. Si le HTML source déclare d’abord tous les champs du conducteur puis tous les champs du véhicule, l’ordre du DOM et l’ordre visuel restent alignés, colonne par colonne :

<div class="colonne-conducteur">
  <label for="age-conducteur">Âge du conducteur</label>
  <input type="number" id="age-conducteur">
</div>
<div class="colonne-vehicule">
  <label for="modele-vehicule">Modèle du véhicule</label>
  <input type="text" id="modele-vehicule">
</div>

Le problème survient quand une grille CSS réorganise visuellement ces blocs sans que l’ordre du DOM ne suive. Sur ce formulaire, une contrainte de responsive design a conduit à inverser l’ordre visuel des deux colonnes sur grand écran (le véhicule affiché à gauche, le conducteur à droite) via la propriété CSS order sur un conteneur en display: flex, sans toucher au HTML.

Pourquoi cette solution CSS pose problème

La propriété order change uniquement l’ordre d’affichage visuel des éléments flexibles ou de grille ; elle ne modifie jamais l’ordre de tabulation, qui reste calé sur le HTML source. Résultat sur ce formulaire : au clavier, on commence par les champs du conducteur (premiers dans le DOM), alors qu’ils apparaissent visuellement à droite. Une personne qui voit l’écran et navigue au clavier voit le focus sauter d’une colonne à l’autre dans un ordre qui ne correspond à aucune lecture naturelle.

Ce défaut porte un nom dans les critères WCAG : le critère sur l’ordre de focus significatif demande que la séquence de navigation respecte un ordre qui préserve le sens et l’utilisation prévue du contenu. Une inversion purement visuelle par CSS, sans changement du DOM, viole directement ce principe dès qu’elle crée un décalage perceptible.

Où corriger : le HTML, jamais le CSS d’ordre

La correction robuste consiste à réordonner le HTML source pour qu’il corresponde à l’ordre visuel voulu, puis à laisser le CSS gérer uniquement la disposition en colonnes, sans propriété order :

<div class="colonne-vehicule">
  <label for="modele-vehicule">Modèle du véhicule</label>
  <input type="text" id="modele-vehicule">
</div>
<div class="colonne-conducteur">
  <label for="age-conducteur">Âge du conducteur</label>
  <input type="number" id="age-conducteur">
</div>

Cette approche demande parfois un ajustement du CSS pour retrouver la disposition en grille souhaitée sans dépendre de la propriété order, mais elle garantit que l’ordre de tabulation et l’ordre visuel restent alignés quel que soit le point de vue depuis lequel on parcourt le formulaire.

Une vérification simple à intégrer au processus

• Fermer les yeux, ou simplement regarder ailleurs, et parcourir le formulaire uniquement à la touche Tab en écoutant l’ordre logique des champs annoncés.
• Comparer cet ordre à une lecture visuelle naturelle de la page, de haut en bas et de gauche à droite.
• Rechercher systématiquement la propriété order dans le CSS du formulaire avant toute mise en production.

Sur ce formulaire de devis, le décalage n’avait été remarqué par personne en interne : c’est un retour d’un visiteur naviguant au clavier qui a signalé que les champs répondaient dans un ordre qui ne correspondait pas à ce qu’il voyait à l’écran.

En résumé

L’ordre visuel obtenu par CSS et l’ordre de tabulation déterminé par le DOM sont deux mécanismes indépendants qui coïncident par défaut, mais qui peuvent diverger dès qu’une propriété comme order réorganise l’affichage sans toucher au HTML source. La correction fiable reprend toujours le HTML, jamais un ajustement CSS supplémentaire.