Des liens d’évitement astucieux

Les liens d’évitement (aussi appelés liens de navigation interne) sont des éléments de navigation permettant de contourner des regroupements de liens et ainsi d’accéder plus rapidement à des zones précises de la page.

Ces systèmes de navigation sont particulièrement utiles, voire parfois « indispensables », pour plusieurs catégories d’utilisateurs :

• Personnes naviguant exclusivement avec le clavier.
• Personnes aveugles ou malvoyantes utilisant un lecteur ou une loupe d’écran.
• Personnes surfant sur périphérique mobile (sans souris).

C’est pourquoi, une recommandation d’accessibilité demande de prévoir des liens d’évitement sur l’ensemble des pages du site.

Ce billet n’a pas pour objectifs d’expliquer comment techniquement mettre en place des liens d’évitement .

Mise en évidence de la zone de destination

Chez Atalan, nous avons adoré l’initiative découverte sur le site European Accessibility Forum Frankfurt (en anglais).

Explications

Lorsque l’on navigue au clavier sur ce site, les 2 premières tabulations font apparaître respectivement les liens d’évitement « Skip to content » et « Skip to navigation ». Jusque là, assez classique.

Sauf que vous aurez peut-être remarqué qu’il se passe quelque-chose dans la page lorsque le focus est placé sur ces liens :
la zone de destination est graphiquement mise en surbrillance.

L’intérêt réside principalement dans le fait que les utilisateurs clavier peuvent découvrir à l’avance où ils seront placés lorsqu’ils activeront ces liens. Pratique !

Mise en œuvre

Techniquement, pour obtenir ce comportement, il s’agit par exemple :

1. D’ajouter, en JavaScript, une classe CSS (.target) à l’élément de destination (<div role="main">) lorsque le focus est placé sur l’ancre correspondante (« Aller au contenu »).
2. De supprimer, toujours en JavaScript, cette classe lorsque le focus quitte l’ancre correspondante.
3. De prévoir, dans la CSS, un aspect pour l’élément de destination en état de mise en évidence tel que par exemple : div[role=main].target {border:.2em dashed blue}.

Par exemple, sur ce blog, nous avons opté pour l’ajout d’une ombre tout autour de la zone de contenu et de la colonne de droite.

Accélérer la navigation au clavier dans les menus déroulants

Nous avons également beaucoup apprécié l’initiative mise en place sur le site de la HSBC (NDLR : depuis l’écriture de ce billet cet exemple n’est plus disponible en ligne).

En plus du traditionnel lien d’évitement « Skip page header and navigation » qui permet de se placer directement au début du contenu, ils en ont judicieusement proposés au sein du menu déroulant (situé en haut de la page, juste après le logo).

Intérêts

Lorsque l’on parcoure le menu déroulant au clavier, on remarque l’apparition instantanée de liens du type « Skip to […] » en haut à droite de chaque sous-menu.

Concrètement, ces liens permettent d’économiser jusqu’à plus de 35 tabulations pour le premier sous-menu « Every Day Banking » (20 pour les autres en moyenne) et accélère par conséquent la navigation au clavier dans ce menu déroulant.

Vous remarquerez aussi que les intitulés de ces ancres sont contextualisés et rendus donc parfaitement explicites.

Ici, cela est particulièrement pertinent car les sous-menus contiennent de nombreux liens. Il serait envisageable d’étendre cette bonne pratique à d’autres cas d’usage ; dans de longs articles contenant de nombreux liens par exemple.

Affichage par défaut des liens d’évitement

Bien qu’il soit envisageable de n’afficher les liens d’évitement qu’à leur prise de focus clavier, nous estimons qu’il est préférable de les afficher de manière permanente.

Pour les personnes utilisant une loupe écran

Les personnes utilisant un système de zoom peuvent utiliser ces ancres pour positionner leur loupe directement à l’endroit souhaité ; ce qui peut leur éviter de chercher ce dernier indéfiniment.

Pour les personnes surfant sur périphérique mobile

Les personnes naviguant avec un périphérique mobile non tactile peuvent utiliser ces ancres pour éviter de parcourir, avec leur curseur, tous les liens les séparant de la zone de destination souhaitée.

Enfin, les personnes naviguant avec un périphérique mobile tactile peuvent eux, utiliser ces ancres pour éviter de scroller longtemps dans la page avant d‘atteindre la zone souhaitée.

Ajouter un commentaire