Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →
Barrierefreiheit
Qu'est-ce que l'ordre de focus sur un site web ?
L'ordre de focus est l'ordre dans lequel la touche Tab accède aux éléments de contrôle d'une page. Il doit suivre l'arrangement visible : de haut en bas, de gauche à droite. Si le focus saute plutôt de façon aléatoire, les utilisateurs de clavier perdent l'orientation — ils ne peuvent pas prévoir où le prochain appui sur une touche les mènera. Le critère WCAG 2.4.3 exige un ordre compréhensible.
Comment un mauvais ordre de focus se produit
La touche Tab suit l'ordre des éléments dans le code source — non pas ce qui est visible à l'écran. Si la mise en page déplace les éléments vers d'autres positions, les deux ordres divergent : le focus passe du champ de nom au pied de page et revient au bouton Envoyer. De même, les fenêtres de dialogue insérées ultérieurement se retrouvent souvent tout à la fin du code source — les utilisateurs de clavier qui veulent y entrer doivent d'abord traverser le reste de la page. Un troisième cas classique concerne les numéros de Tab fixés dans le code source, qui imposent un ordre distinct entrant en conflit avec la mise en page. Tout cela ne devient visible que lors d'une traversée clavier réelle.
Comment le service de contrôle mesure l'ordre de focus
Pendant la traversée clavier réelle, le service de contrôle appuie sur votre page et enregistre la position de chaque arrêt. Ensuite, il compte les sauts arrière : des endroits où le focus se déplace clairement vers le haut ou vers la gauche sur la même ligne, contre la direction de lecture. Si plus de 30 % des changements de focus sont en saut arrière, le critère est considéré comme non respecté ; entre 10 et 30 %, le rapport note un point de vérification manuel, car les mises en page multi-colonnes peuvent expliquer certains sauts. En dessous, l'ordre est considéré comme compréhensible. Le rapport indique le nombre de sauts arrière et d'arrêts vérifiés — vous voyez la base de mesure, pas seulement le jugement.
Beispiele
Fokus springt durch tabindex
<input tabindex="3" name="name">
<input tabindex="1" name="email">
<button tabindex="2">Senden</button><input name="name">
<input name="email">
<button>Senden</button>Positive tabindex-Werte erzeugen eine eigene Reihenfolge, die von der sichtbaren abweicht. Die Quelltextreihenfolge ist die richtige.
- Parcourez la page la plus importante avec Tab et regardez le marquage — suit-il la direction de lecture de haut à gauche vers bas à droite ?
- Testez en particulier les formulaires : l'ordre des champs au clavier doit correspondre à l'ordre visible.
- Demandez à votre agence de ne pas utiliser de numéros Tab fixés dans le code source — l'ordre du code source doit être l'ordre visible.
- Laissez les fenêtres de dialogue placer le focus dans la fenêtre lors de l'ouverture et le renvoyer au point de départ lors de la fermeture.