5.1- Les liens d'évitement :
Comme nous l'avons vu, il s'agit de liens permettant de passer un groupe de liens ou, par généralisation, de passer d'une section à une autre.
Ils s'implémentent dans le corps même de la structure, comme premier lien disponible de la section qu'ils permettent de sauter, comme dans l'exemple de la page du W3C que je résume ci-dessous :
<h2>Menu de navigation</h2>
<ul>
<li><a href="#actu">Passer à l'actualité</a></li>
....
</ul>
Vous devrez respecter une uniformité dans la manière de présenter ces liens, ce sera soit "passer la section x ou y" soit "passer à la section x ou y" mais jamais un mélange des deux formules !
De même l'implémentation d'un lien d'évitement "générique" par exemple "passez à la section suivante" est fortement déconseillée : ces liens ne seront pas explicites et donc difficiles d'utilisation, notamment pour les utilisateurs de lecteurs d'écran.
Enfin, inutile d'implémenter des raccourcis clavier sur ces liens car ils vont être utilisés au fil de l'eau.
Attention cependant à la maintenance nécessaire pour les liens d'évitement : n'oubliez pas qu'il s'agit de liens contextuels, susceptibles de changer d'intitulé et de cible en fonction de chaque page, notamment en cas de modification du contenu. De fait, ils peuvent finir par poser un problème similaire à la maintenance des attributs tabindex, ce qui nécessite un "suivi" de leur implémentation.
5.2- Les liens d'accès rapide :
Ce sont les rois des liens d'aide à la navigation dans la page; leur usage commence à rentrer dans les moeurs et c'est une excellente chose.
Ils doivent se plier à un certain nombre de règles :
- Vous devez en limiter le nombre et l'usage : Il ne s'agit surtout pas de construire un sommaire de la page (nous reviendrons plus bas sur les relations entre ces deux mécanismes). Généralement, en fonction de la structure du haut de la page, une paire de liens d'accès rapide comme "aller au contenu" et "aller au menu" suffit pour qu'ils remplissent parfaitement leur office. Contentez-vous de pointer sur l'essentiel, posez-vous la question de savoir s'il est vraiment utile d'implémenter un lien "aller à la recherche" si votre formulaire de recherche ne se trouve qu'à 3 ou 4 tabulations de là.
Finalement, vous allez implémenter quelque chose du genre :
<ul>
<li><a href="#menu">Menu</a></li>
<li><a href="#contenu">Contenu</a></li>
<li><a href="#recherche">Recherche</a></li> (Si c'est vraiment nécessaire)
</ul>
4 ou 5 liens est la limite au delà de laquelle il faut s'alerter sur le bien fondé de la construction de cette liste. Cela ne signifie pas qu’il ne faut jamais dépasser 5 liens d’accès rapide mais qu’il faut simplement avoir une bonne raison de le faire…
Vous pouvez, en revanche, compléter ponctuellement cette liste s'il est nécessaire de pointer une région particulière de la page, par exemple, une vidéo embarquée ou un formulaire de saisie.
Certains considèrent que le doublement des liens "menu" et "contenu" est redondant et que la simple utilisation d'un lien d'évitement "passer le menu" suffit. C'est un peu vrai et un peu faux, en particulier dans le cas où ces liens sont équipés de raccourcis clavier, ce qui est toujours une bonne idée, même si on connait les limitations de l'utilisation de accesskey.
- Laissez-les toujours à la même place dans vos pages. Il n'y a qu'une seule place intelligente : en haut du code, avant ou après le titre principal de la page, peu importe.
- Ne les cachez pas ! Si il y a une chose à retenir de ces liens, c'est bien celle-ci : de grâce, laissez-les visibles. Il n'y a rien de pire que des liens d'accès rapide cachés par CSS, quelle qu'en soit la méthode, pour trois raisons importantes au moins :
- Les utilisateurs de lecteurs d'écran ont leurs propres fonctionnalités qui permettent de naviguer de titre en titre ou de section en section. Le gain des liens d'accès rapide pour cette catégorie d'utilisateurs est donc peu évident.
- Des liens d'accès rapide cachés par CSS provoquent une grave rupture de navigation dans la page pour les utilisateurs de la navigation clavier. En effet, bien que cachés, ces liens continuent à réagir au focus de la tabulation, ce qui est particulièrement gênant.
- Enfin, ils sont généralement la seule véritable aide que l'on peut implémenter pour ces utilisateurs.
5.3- Les liens de navigation interne :
Cela ne concerne, en général, que le lien "retour en haut de page".
Il est également implémenté dans le code de la page, à intervalles réguliers, et permet simplement de revenir en haut de page, plus précisément au premier contenu de la page.
Vous trouverez beaucoup d'implémentations de ce lien qui se contentent d'utiliser l'élément body comme cible :
<body id="top">
<a href="#top">retour en haut de page</a>
Ne faites jamais ça ! Pour les raisons expliquées plus haut (2. méthode générales d'implémentation), cela rendra inopérant son utilisation pour la navigation clavier sous IE. Utilisez comme cible un vrai lien <a>; par exemple, juste avant les liens d'accès rapide, de cette manière, vous serez certain que le retour en haut de page sera synchronisé avec la tabulation.
Implémentez ces liens de retour en haut de page à bon escient de manière régulière et toujours à la même place. Accessiweb 1.x recommande d'en utiliser dés lors que la page fait plus de trois écrans en résolution 1024.
D'autres liens de navigation interne peuvent être utilisés : dans le cas de listes de liens particulièrement longues, il peut être intéressant d'avoir régulièrement des liens " retour au début de la liste …". Ces liens s'apparentent fortement aux liens d'évitement même si, en l'occurrence, il ne s'agit pas d'éviter mais de "revenir". Il faut en limiter l'usage au strict nécessaire pour ne pas surcharger la page.