Ordre de focus

Ce que ce critère exige

Un utilisateur au clavier qui appuie sur Tab doit parcourir les éléments interactifs dans un ordre lui permettant d’accomplir chaque tâche sans perdre le contexte. Pour les interfaces en français (orientation gauche-droite), cela signifie presque toujours du haut vers le bas, de gauche à droite. L’ordre n’a pas besoin d’être identique à l’ordre visuel, mais tout écart doit tout de même préserver le sens — par exemple, un lien « aller au pied de page » peut se trouver en dehors du flux principal, tant que le reste reste cohérent.

Le mode d’échec que ce critère cible inclut les boîtes de dialogue qui capturent le focus sur la page en arrière-plan, les grilles réordonnées par glisser-déposer avec un ordre de tabulation obsolète, et le CSS qui réorganise le contenu visuellement tout en laissant le DOM dans sa séquence d’origine.

Comment satisfaire ce critère

• Construire le DOM dans l’ordre de lecture. Si la mise en page visuelle diffère, utiliser avec soin les propriétés d’ordre CSS Grid ou Flexbox — mais c’est l’ordre de la source que Tab suit.
• Lorsqu’une fenêtre modale s’ouvre, y déplacer le focus et le piéger à l’intérieur jusqu’à sa fermeture. À la fermeture, restituer le focus à l’élément déclencheur.
• Ne jamais utiliser des valeurs tabindex positives (tabindex="3"). Elles créent des ordres personnalisés qui entrent en conflit avec le DOM et se brisent dès que la page change.
• Pour les listes réordonnables par glisser-déposer, mettre à jour l’ordre du DOM pour qu’il corresponde au nouvel ordre visuel afin que la séquence de tabulation reste synchronisée.
• Tester en appuyant sur Tab depuis la barre d’adresse jusqu’à chaque élément focalisable de la page. Si l’on se sent « perdu », les utilisateurs le seront aussi.

Échecs courants

• Une fenêtre modale s’ouvre mais le focus reste sur la page en arrière-plan. Tab parcourt les éléments masqués tandis que la modale flotte sans jamais recevoir le focus.
• Un menu mobile hors-canvas s’ouvre, le focus reste dans le corps de la page. Les utilisateurs de lecteurs d’écran ne trouvent pas ce qui vient d’apparaître.
• flex-direction: row-reverse inverse l’ordre visuel ; l’ordre du DOM est inchangé ; Tab se déplace maintenant de droite à gauche tandis que la lecture va de gauche à droite.
• Des valeurs tabindex personnalisées dispersées dans un formulaire, avec les ajouts ultérieurs qui héritent de tabindex="0" et atterrissent en fin de séquence.
• Auto-focus sur une fenêtre pop-up « s’abonner » qui apparaît 8 secondes après le chargement, arrachant le focus à quiconque était en train de lire.

Pourquoi ce critère est important

L’ordre de focus est l’équivalent clavier de l’ordre de lecture. Lorsqu’il est défaillant, l’expérience n’est pas seulement lente — elle est incohérente. Les utilisateurs souffrant de troubles moteurs qui naviguent exclusivement avec Tab et Maj+Tab peuvent être renvoyés vers la mauvaise section d’un formulaire, manquer un champ obligatoire, ou perdre leur place dans une longue page à cause d’un seul élément mal positionné.