Niveau Niveau confirmé

Les liens d'évitement

Tutorielaccessibilité

Publié par le , mis à jour le (5408 lectures)

accessibilité lien évitement

Méthode d'implémentation générale

Ces liens fonctionnent avec deux éléments : le lien lui-même et une ancre qui en constitue la cible.

Du point de vue de la spécification HTML, la cible peut être n'importe quel élément doté d'un identifiant (attribut id ou name)

Il est préférable et plus robuste, notamment pour IE, d'implémenter l'ancre au moyen d'un "lien réel" (balise a) sur le modèle :

<a href="#contenu">Aller au contenu</a>
Avec comme cible
<a href="#" id="contenu" name="contenu"></a>

A noter que l'ancre cible n'aurait pas besoin, en théorie, de référence href, mais qu'il s'agit là d'un moyen pratique de corriger un défaut d'IE : en effet, la prise de focus d'une ancre avec la souris désynchronise la tabulation sous IE lorsque l'ancre cible est dépourvue de référence href. Autrement dit, si vous cliquez sur "aller au contenu", vous obtenez bien le focus sur l'ancre cible, mais si vous tabulez à la suite, la tabulation ne suit pas et reste là où vous en étiez auparavant.

Une autre manière de résoudre ce problème pour IE est de conférer, au moyen de CSS, un état "layout" à l'ancre cible. Notez, cependant, que cette solution, aussi élégante soit-elle, posera un problème, sur IE, lorsque CSS sera désactivé.

Je ne m'étendrais pas sur ce sujet et je vous recommande plutôt d'implémenter vos ancres cibles sous forme d'un lien "<a>" avec un href, un id et un name. A la vérité cela va créer une gêne pour les lecteurs d’écrans qui vont restituer ces liens, à la différence d’une ancre sans href. Mais, comme vous pourrez le constater, l’essentiel du propos étant d’en limiter l’usage à ce qui est vraiment utile, la gêne occasionnée peut être considérée comme "acceptable".

Ce sera à vous de choisir la bonne méthode en fonction de votre page et du nombre d'ancres nécessaires.

Enfin, le positionnement de l'ancre cible doit permettre de recueillir toutes les informations nécessaires, notamment de titre, permettant d'identifier clairement la section ou l'élément atteint.

Une erreur commune consiste à implémenter la cible après un élément de titre :

<h2>Contenu</h2>
<a href="#" id="contenu" name="contenu" /></a>

Ce positionnement ne permettra pas à l'utilisateur, par exemple de lecteur d'écran, de relier explicitement la cible au titre de la section, ce qui peut créer une ambiguïté.