Des liens d’accès rapide

Vous avez sûrement déjà vu ces liens en haut de page de nombreux sites publics. Ce sont des liens d’évitement. Ils sont parfois organisés en sur-navigation qu’on peut nommer menu d’accès rapide.

Pourquoi un menu supplémentaire ? Il ne s’agit pas de concurrencer un menu déjà existant, mais simplement de le compléter en permettant à l’internaute qui navigue qu’au clavier, d’accéder rapidement à ce qu’il cherche.

Les différents liens d’évitement

S’il y a un lien d’évitement qu’on ne peut pas s’épargner c’est celui qui vous amène directement au contenu. Il n’est pas rare d’avoir une ribambelle d’éléments génériques ou hors-sujet avant le bloc de contenu proprement dit. L’objectif est donc de rendre la lecture des pages moins répétitive et plus simple pour les non-voyants et tous ceux qui ne naviguent pas à la souris. Lire plusieurs pages d’un site sans pouvoir zapper les éléments génériques est une épreuve d’endurance pour un aveugle.

Les autres liens d’évitement permettent d’accéder facilement aux différents modes de navigation du site s’ils existent : accès au menu, accès au formulaire de recherche, accès au plan du site. Il y a également les liens pour passer d’une section à l’autre ou revenir en haut de page qui sont fort pratiques.

Mise en place

Le principe est donc de placer ce menu tout en haut de la page. Une simple liste de liens après l’ouverture de la balise body suffira. Voici un exemple de code HTML :

<div id="access-links">
	<ul>
		<li><a href="#content">Aller au contenu</a></li>
		<li><a href="#main-menu">Aller au menu</a></li>
		<li><a href="plan-du-site.html">Plan du site</a></li>
	</ul>
</div><!-- #access-links -->

Les deux premiers liens pointent donc vers des ancres qui correspondent aux identifiants de ces blocs.

Simple à la création

Voilà encore un procédé qui est très facile à mettre en place.
L’idéal est de prévoir ce menu à la création des templates. Il faudra s’assurer que d’un template à l’autre les identifiants des blocs de contenu, menu et recherche restent bien identiques.
Si on ajoute ces liens d’évitement en mise à jour, il faudra bien vérifier que les différents blocs visés existent bien sur tous les templates et qu’ils ne voient pas leurs identifiants changer.

Visible ou invisible ?

L’idéal est que ce menu d’accès rapide soit permanent, donc toujours visible. Mais si après de nombreuses discussions vous n’arrivez pas à imposer ce menu à votre équipe projet, vous pourrez l’ajouter d’une façon transparente via du CSS.
Attention à la manière de le cacher : évitez à tout prix le display:none, dans ce cas votre menu d’accès rapide ne servira à personne !

Donc utilisez des propriétés de positionnement et surtout faites en sorte qu’il devienne visible dès sa prise de focus via la touche Tab. Aucun JavaScript ne sera nécessaire pour cette simple tâche.

Voici un exemple de CSS pour rendre votre menu invisible puis visible à sa prise de focus, jouez avec les pseudo classes :focus et :active :

#access-links ul li a { position:absolute; overflow: hidden; left:-3000px; padding:.3em ; background:#2e3341; color:#fff; text-decoration:none;  }
#access-links ul li a:focus,
#access-links ul li a:active { position:relative; overflow: visible; left:0; }

Voici la page test avec ses liens d’évitement qui apparaissent lors de la navigation au clavier (avec la touche Tab)  :

Démo HTML/CSS des liens d’évitement

Quel critère valide-t-on ?

Avec ces liens d’accès rapide, vous validez le critère 12.11 du référentiel Accessiweb. C’est du niveau A (bronze). Autant vous dire qu’avec ou sans landmarks ARIA, ces liens restent essentiels pour un minimum d’accessibilité.

Conclusion

A garder au chaud dans votre template de base, ce menu d’accès rapide. On devrait le rendre aussi obligatoire qu’une page de mentions légales !

Pour travailler dessus :

Le critère 12.11 Accessiweb

L’exemple factice présenté ici en téléchargement (2Ko)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *