Partie 4 - L'accessibilité

Les liens d'évitement ("skip links")

Qu'est-ce que c'est ?

Les liens d'évitement sont conçus pour permettre à certains utilisateurs de sauter une section d'un document pour arriver rapidement à une autre section de contenu. Cela peut vouloir dire passer les liens de navigation du site pour atteindre directement le contenu du site, ou sauter le contenu pour arriver à la navigation ou un autre contenu.

Quelques exemples :

<div id="skiplink">
   <a href="#contenu" title="sauter vers le contenu">Sauter au contenu</a>
</div>
<p id="skiplink">
   <a href="#navigation" title="sauter vers la navigation">Sauter à la navigation</a>
</p>
<ul id="skiplink">
   <li><a href="#contenu" title="sauter vers le contenu">Sauter au contenu</a></li>
   <li><a href="#navigation" title="sauter vers la navigation">Sauter à la navigation</a></li>
</ul>

Liens d'évitement visibles

Quand cela est possible, les liens d'évitement devraient être rendus visibles, plutôt que cachés dans le code source. Ceci permet aux utilisateurs dépendants des fonctions du clavier (sans souris) de tabuler au premier lien d'évitement d'abord, et décider si ils veulent passer le contenu ou la navigation.

Positionnement des liens d'évitement

Les liens d'évitement visibles peuvent être positionnés en début de code source mais visuellement n'importe où sur la page en utilisant le positionnement CSS absolu.

Si les liens d'évitement doivent être contenus dans un conteneur parent, ce parent peut être positionné de manière relative (position: relative;), et le lien peut ainsi être positionné lui en positionnement absolu. Cela permet au liens d'évitement d'être placés n'importe où - en relation avec son conteneur parent.

Exemple de lien d'évitement.