Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

11.1.2. Mettre en place des liens d'évitement

Un lien d’évitement du type “Aller au contenu” doit systématiquement être présent sur chaque page afin de faciliter la navigation au clavier.

Ce lien doit être le premier élément interactif dans le code HTML. Il s’agit d’un lien vers une ancre qui doit permettre un accès direct au contenu principal de la page.

<a id="evitement" href="#contenu">Aller au contenu</a>
 
[…]
 
<div id="contenu" role="main">
    […]
</div>

Attention

Bien qu’il soit fortement recommandé d’afficher ce lien, celui-ci peut être masqué par défaut, s’il n’a pas été prévu dans les maquettes graphiques. En revanche, il doit dans tous les cas être rendu visible à la prise de focus au clavier.

Le lien d’évitement ne doit jamais être masqué à l’aide des propriétés CSS display: none; et/ou visibility: hidden; sous peine de le rendre totalement inatteignable au clavier.

Privilégier une autre solution, par exemple l’utilisation des codes suivants :

a#evitement
{
position: absolute;
left: -999999px;
}
 
a#evitement:focus
{
position: static;
}

Remarque

Dans certaines situations, beaucoup de tabulations sont nécessaires pour accéder au menu principal et/ou au moteur de recherche depuis le sommet de la page.

Une bonne pratique d’accessibilité consiste alors à mettre en place une liste de liens d’évitement.

<ul id="evitement">
    <li><a href="#contenu">Aller au contenu</a></li>
    <li><a href="#menu">Aller au menu</a></li>
    <li><a href="#recherche">Aller à la recherche</a></li>
</ul>

Aller plus loin

Recommandations associées

notices/html-css/mettre-en-place-des-liens-d-evitement.txt · Dernière modification: Le 06/03/2013 à 16:34 (modification externe)
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :