Comment vérifier que l’ordre de tabulation reste logique ?

Par l’équipe Limpi. Les faits externes sont distingués des méthodes Limpi et aucune visibilité, position ou citation automatique n’est garantie.

Comprendre le problème

L’ordre de tabulation doit permettre de parcourir les éléments interactifs dans une séquence qui conserve le sens et l’opérabilité. Il n’a pas à reproduire au pixel près la disposition visuelle, mais un saut vers une zone sans rapport, un retour imprévisible ou un contrôle inaccessible peut désorienter la navigation au clavier.

Inspecter le comportement réellement servi

Parcourez la page avec Tab et Maj+Tab depuis le début, sans souris. Notez la séquence réelle des liens, boutons, champs et composants personnalisés. Comparez cette séquence à l’ordre du DOM, aux groupes fonctionnels visibles et aux changements de contexte. Recommencez sur mobile avec clavier externe si le layout responsive réordonne les blocs.

Distinguer les mécanismes proches

Distinguez ordre de focus, visibilité du focus et gestion du focus. Une séquence logique peut rester inutilisable si l’indicateur visuel est absent ; inversement, un focus très visible n’empêche pas un ordre incohérent. Le tabindex positif force une priorité artificielle et peut créer une séquence différente de l’ordre du document, tandis que tabindex="0" intègre un contrôle à l’ordre naturel.

Identifier les causes probables

Les anomalies apparaissent après réordonnancement CSS, insertion dynamique, widgets rendus à la fin du DOM ou usage de valeurs tabindex positives. Les menus, carrousels et formulaires conditionnels peuvent aussi laisser des éléments cachés dans la séquence. Une SPA peut déplacer le contenu visuel sans placer le focus au bon endroit après une navigation interne.

Corriger à la bonne couche

Privilégiez un DOM dont l’ordre suit la lecture et les groupes fonctionnels, puis laissez le navigateur construire la séquence naturelle. Retirez les tabindex positifs sauf justification exceptionnelle. Pour les composants composites, appliquez le modèle clavier approprié au composant plutôt que de rendre chaque élément interne tabulable sans stratégie.

Traiter les cas limites sans automatisme

Une modale, un menu ou un widget complexe peut légitimement gérer le focus de manière spécifique. L’objectif n’est pas que Tab traverse tous les descendants dans tous les composants, mais que la personne comprenne où elle se trouve et puisse atteindre l’action attendue. Vérifiez aussi les éléments désactivés, cachés, inert et ceux rendus hors écran.

Valider sur des cas réels

Testez plusieurs parcours complets : navigation principale, formulaire, ouverture puis fermeture d’une modale, action dans une carte et retour arrière. À chaque étape, notez l’élément focalisé et le précédent. Aucun focus ne doit disparaître dans un contenu caché ou sauter vers une zone sans relation logique. Contrôlez aussi Maj+Tab, pas seulement le parcours vers l’avant.

Conserver une preuve reproductible

Conservez une liste ordonnée des sélecteurs ou libellés focalisés, accompagnée d’une capture ou d’un court enregistrement si cela aide à reproduire le problème. La preuve doit identifier le point exact où la séquence devient incohérente et la règle technique responsable : DOM, tabindex, script ou composant tiers.

Prévenir la régression

Dans le design system, testez les composants au clavier avant leur intégration. Les revues de pull request peuvent signaler tabindex supérieur à zéro et les éléments interactifs cachés, mais une vérification de scénario reste nécessaire. Après une refonte responsive ou un changement de grille, rejouez le parcours car l’ordre visuel peut avoir changé sans le DOM.

Clôturer le diagnostic

Un bon ordre de tabulation suit une logique de tâche et de lecture, pas une règle graphique absolue. Corrigez les ruptures qui rendent la navigation difficile à prévoir, puis vérifiez la cohérence sur plusieurs gabarits. Documentez les exceptions des composants composites afin qu’elles ne soient pas confondues avec des sauts accidentels.

Construire une matrice de contrôle

Pour ordre de tabulation, construisez une matrice qui sépare constat, intention, couche propriétaire et preuve finale. Le périmètre documentaire de cette page est volontairement borné : Traiter l’ordre de focus comme une question de sens et d’opérabilité, sans imposer qu’il reproduise exactement la disposition visuelle. Ajoutez au minimum le contexte de test, la valeur observée, le résultat attendu, l'origine technique supposée puis confirmée, et la méthode de revalidation. Quand plusieurs gabarits partagent le même composant, échantillonnez des cas représentatifs plutôt que de multiplier des constats identiques. Une anomalie ambiguë doit rester en revue jusqu'à ce qu'une preuve distingue clairement configuration, contenu et comportement réellement servi. Cette matrice permet aussi de vérifier qu'une correction locale ne masque pas un problème global et qu'un changement d'infrastructure n'est pas confondu avec une décision éditoriale.

Relier ce contrôle au reste du diagnostic

Ce sujet ne doit pas être traité isolément. Vérifiez les pages et contrôles liés /site/accessibilite, /site/verifier-navigation-clavier, /site/focus-visible-accessibilite, puis comparez leurs conclusions avec l'intention « ordre tabulation focus accessibilite ». Les sources officielles associées à cette page sont w3c_focus_order; elles bornent les affirmations externes et doivent être revalidées si leur documentation évolue. Ne transformez pas une recommandation Limpi en règle universelle : distinguez ce qui est imposé par une spécification, ce qui dépend d'un moteur ou navigateur et ce qui relève d'un choix d'implémentation. Terminez par un contrôle de cohérence entre title, H1, contenu visible, canonical, maillage et données structurées. Si deux signaux se contredisent, conservez le cas en revue au lieu de conclure sur la base d'un seul outil. Consignez enfin la date du contrôle, le gabarit concerné et le propriétaire de la correction afin de pouvoir rejouer exactement le même scénario après une évolution du site.

Sources officielles

Les règles des moteurs et des fournisseurs de crawlers peuvent évoluer. Les affirmations techniques de cette page sont bornées par les documentations officielles ci-dessous.

• w3c focus order