Plusieurs liens d'évitement pour les grandes pages

Sur une petite page, un seul lien d’évitement suffit. Mais les mises en page complexes comportent plusieurs régions répétées, et les utilisateurs peuvent vouloir atteindre autre chose que la région principale.

Une personne peut vouloir atteindre la zone de recherche, la navigation principale ou le pied de page, et pas toujours l’article. Proposez les destinations qu’elle cherche réellement.

Un ensemble courant comprend Accéder au contenu, Accéder à la navigation, Accéder à la recherche. Limitez-le afin que la liste elle-même ne devienne pas une corvée.

Regroupez vos liens d’évitement dans une petite région nav, afin qu’ils soient lus comme un ensemble cohérent de raccourcis en haut de la page.

Donnez au conteneur un aria-label comme « Liens d’évitement ». Sans nom, deux navigations sur une même page paraissent identiques à une personne utilisant un lecteur d’écran.

Chaque raccourci a toujours besoin d’un id réel vers lequel aboutir. « Accéder à la recherche » pointe vers la région de recherche, « Accéder à la navigation » vers le menu, et ainsi de suite.

Comme précédemment, ajoutez tabindex moins un à chaque cible afin que le focus s’y déplace de manière fiable lorsque le lien correspondant est activé.

Résistez à l’envie d’ajouter un raccourci pour chaque élément. Trop de liens d’évitement deviennent leur propre bloc de contenu répété à parcourir avec Tab.

N’oubliez pas que de bons repères permettent déjà aux personnes utilisant un lecteur d’écran de passer d’une région à l’autre. Les liens d’évitement supplémentaires servent surtout aux personnes voyantes qui utilisent un clavier.

Présentez les raccourcis dans un ordre logique, généralement le contenu en premier puisque c’est la destination de la plupart des visiteurs. Placez les destinations moins fréquentes à la fin.

Parcourez l’ensemble avec Tab et activez chaque lien. Vérifiez que le focus arrive à chaque fois dans la bonne région, et non sur l’élément voisin. ✅

Pour les grandes pages, proposez quelques liens d’évitement dans une navigation nommée, chacun ayant sa propre cible pouvant recevoir le focus. Gardez un ensemble court, avec le contenu en premier. 🎯