Rendre le parcours de tabulation prévisible

Sur une page parcourue au clavier, chaque pression sur Tab doit faire avancer vers le contrôle suivant dans un ordre compréhensible. Si l’ordre de tabulation ne correspond pas à l’ordre de lecture, vous pouvez manquer un lien ou devoir revenir en arrière pour comprendre où vous vous trouvez. Vous allez vérifier et préserver cet ordre dans la page de l’association culturelle.

La structure des régions et la hiérarchie des titres ont été étudiées dans la leçon précédente. Ici, concentrez-vous sur l’ordre du document : c’est lui qui détermine généralement l’ordre de déplacement au clavier parmi les liens et les contrôles natifs.

Ordre du document et ordre de tabulation

Dans le HTML de référence, le lien de marque et les liens de navigation apparaissent avant le contenu principal. Le bouton d’inscription vient ensuite dans l’en-tête, puis le contenu de l’événement et enfin les liens du pied de page. Sans modification particulière, la tabulation parcourt ces éléments interactifs dans cet ordre, même si leur apparence est ajustée par la feuille de style.

L’ordre source est l’ordre dans lequel les éléments sont écrits dans le document HTML. L’ordre de tabulation est la séquence suivie lorsque vous utilisez la touche Tab, puis Majuscule+Tab pour revenir en arrière. Garder ces ordres cohérents aide les personnes qui utilisent un clavier ou un lecteur d’écran à suivre le même parcours logique que celui donné par le document.

Vérifier le parcours sur la page de l’association

Ouvrez index.html dans le navigateur, placez-vous au début de la page et avancez avec Tab, sans cliquer dans le contenu. Notez la succession des liens et boutons qui reçoivent le focus, puis comparez-la à leur position dans le code. Utilisez Majuscule+Tab pour vérifier que le retour suit le parcours inverse et qu’aucun contrôle n’est sauté ou atteint de façon surprenante.

1. Lien de la marque vers l’accueil.
2. Liens de navigation vers les événements et l’association.
3. Bouton d’inscription à la newsletter.
4. Lien de l’image de l’événement, si l’image est rendue cliquable ; dans le HTML de référence, elle ne l’est pas.
5. Lien des mentions légales dans le pied de page.

Le lien d’évitement figure avant l’en-tête dans le code du projet ; il intervient donc en premier dans ce parcours. La liste ci-dessus suit ensuite l’ordre des contrôles interactifs de la page de référence. Les éléments non interactifs, comme les titres et les paragraphes, ne reçoivent pas le focus par tabulation dans ce parcours standard.

Éviter les valeurs positives de tabindex

L’attribut tabindex permet de modifier la participation d’un élément à la tabulation, mais une valeur positive impose une priorité artificielle. Le navigateur parcourt alors d’abord les valeurs positives par ordre numérique, puis les éléments sans valeur positive selon leur ordre dans le document. Cette priorité peut faire passer le focus d’un bouton du bas de page à un lien situé plus haut, sans que cette rupture soit visible dans le code comme dans le parcours de lecture.

Ne donnez donc pas de valeurs comme tabindex="1" ou tabindex="2" pour réordonner les liens. Si le parcours est incorrect, réorganisez les éléments dans le HTML pour qu’ils apparaissent dans l’ordre voulu. Les liens et boutons natifs de la page sont déjà accessibles au clavier : vous n’avez pas besoin de leur ajouter tabindex pour les rendre tabulables.

À retenir

• L’ordre de tabulation doit suivre un parcours cohérent avec l’ordre source et la lecture de la page.
• Vérifiez le parcours avec Tab et Majuscule+Tab dans le navigateur, puis comparez-le à la structure HTML.
• N’ajoutez pas de valeurs positives de tabindex pour réordonner les contrôles.
• Corrigez une divergence en réorganisant les éléments dans le document.

Dans la leçon suivante, vous vérifierez le lien d’évitement et la visibilité du focus pendant un parcours sans souris.