12.4. Mettre en place un lien 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 interne qui doit permettre un accès direct au contenu principal de la page.
<body>
<a class="evitement" href="#contenu">Aller au contenu</a>
[…]
<main role="main" id="contenu">
[…]
</main>
[…]
</body>
Remarque
Le lien d’évitement peut être masqué par défaut. En revanche, il doit dans tous les cas être rendu visible à la prise de focus au clavier.
Par conséquent, 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 {
display: inline-block;
color: #555;
background: #fff;
padding: .5em;
position: absolute;
left: -99999rem;
z-index: 100;
}
a.evitement:focus {
left: 0;
}
Astuce
Dans certaines situations, de nombreuses tabulations sont nécessaires pour accéder aux menus principal/secondaire et/ou au moteur de recherche depuis le sommet de la page.
Dans ce cas-là, mettre en place une liste de plusieurs liens d’évitement. Comme par exemple :
<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>
8 commentaires
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
Bonjour,
Concernant la précision : « Ce lien doit être le premier élément interactif dans le code HTML ».
Si un message sur l’utilisation des cookies est présent en haut de la page et qu’il y a un bouton permettant de fermer l’apparition du message, dans ce cas, je pense que le lien d’évitement « aller au contenu » doit être placé en second, après ce message.
Sinon en effet, c’est le premier élément interactif.
Qu’en pensez-vous ?
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
Bonjour Claire,
Nous ne sommes pas tellement favorables à cette proposition.
Tout d’abord, si on la met en place, cela pourrait potentiellement concerner d’autres messages et pas seulement le bandeau d’utilisation des cookies (message d’information, avertissement, etc.).
Et pour chaque cas, des particularités pourraient être trouvées.Par exemple, j’ai personnellement l’habitude de désactiver les cookies. Du coup, je me retrouve avec des messages affichés systématiquement sur chaque page. Je trouve ainsi plutôt agréable de pouvoir éviter au clavier le bandeau cookies.
Le lien d’évitement doit vraiment permettre d’atteindre très vite le contenu. Si on positionne des liens avant celui-ci, on risque de légèrement dégrader l’expérience et la rapidité de navigation au clavier. Si le bandeau cookie possède un bouton de fermeture, un lien vers les mentions légales, un lien vers le site du CNIL, etc. on se retrouve alors avec un trop grand nombre de tabulation avant le lien d’évitement.
Je pense que ce point doit donc être traité au cas par cas. C’est intéressant qu’il soit donc soulevé dans les commentaires :)
Sébastien.
-
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
Re !
Pour le lien-ancre fonctionnel et l’ajout de
tabindex="-1", c’est pour Webkit (Chrome et Safari), non ?
Pour moi, sur IE c’est OK.Mais je peux me tromper !
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
Bonjour Claire,
Sous Internet Explorer, le bug n’intervient que si la balise de destination est
<main>. Pas de souci identifié pour les autres balises.En revanche, effectivement, le souci se rencontre systématiquement pour Webkit, peu importe la balise de destination.
Johan
-
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
Bonjour,
Petite question !
Dans le chapitre 1.5, il est indiqué que l’on peut utiliser la balise
<nav>pour le sommaire d’un article, liste de liens internes à la page.
Les liens d’évitement sont aussi des liens internes à la page. Lorsqu’il y en a plusieurs comme dans l’exemple de la section « Remarque », je verrais bien l’utilisation de la balise<nav>autour de la balise du menu d’évitement !
On pourrait rajouter l’attributaria-label="Liens d'évitement".Après il reste le débat de l’attribut
role="navigation"mais pour être en accord avec le point 1.5, il ne serait pas utilisé ici.Qu’en pensez-vous ?
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
Bonjour Claire,
Merci pour ton commentaire et ta proposition.
De notre point de vue, l’utilisation de la balise
<nav>pour structurer les liens d’évitement est plutôt à éviter car :Une balise
<nav>même sansrole="navigation"intégrée à la racine de<body>est censée être restituée comme une région de type « Navigation » par les lecteurs d’écran. C’est par exemple déjà le cas pour NVDA 2016.2 couplé à Firefox.Et comme les liens d’évitement sont avant tout proposés pour les utilisateurs clavier (personnes déficientes motrices, par exemple), il est d’après nous préférable de ne pas surcharger la liste des régions de type « Navigation » pour les utilisateurs de lecteur d’écran qui peuvent déjà atteindre les principales zones de la page via ces derniers.
Johan
-
si on a un bloc contenant une image + un titre + des liens de téléchargement.
faut-il que l’image et le titre soient cliquables ??
-
Bonjour Lagnadi,
Je ne suis pas sûr que votre question soit en rapport avec la mise en place d’un lien d’évitement, pouvez-vous préciser votre demande si c’est le cas ?
Autrement, pour vous répondre sans réel contexte, l’image et le titre ne doivent pas nécessairement être cliquables, s’ils ne sont pas intégrés dans un lien ou un bouton.
Bien à vous,
Romain.
-
