12.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 interne qui doit permettre un accès direct au contenu principal de la page.

<a class="evitement" href="#contenu">Aller au contenu</a>
[…]
<main role="main" id="contenu" tabindex="-1">[…]</main>

Remarque

L’intégration de tabindex="-1" dans la balise de destination permet de rendre ce lien-ancre fonctionnel sous Internet Explorer et Chrome.

Attention

Bien qu’il soit recommandé d’afficher ce lien, celui-ci 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 {
   position: absolute;
   left: -99999px;
}
a.evitement:focus {
   position: static;
}

Remarque

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>

Aller plus loin

  1. Recommandation d’accessibilité pour la conception fonctionnelle et graphique associée : 1.7. Prévoir l’apparence des liens d’évitement.
  2. Sur le blog Atalan : Des liens d’évitement astucieux.
  3. SkipTo, un système de liens d’évitement reprenant notamment les titres d’une page.
  4. Skip links (In-page Navigation).

7 commentaires

  • Par Claire Bizingre, le 21 septembre 2015 à 17h04.

    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 ?

    Répondre

    • Par Sébastien Delorme, le 25 septembre 2015 à 10h01.

      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.

      Répondre

  • Par Claire Bizingre, le 21 septembre 2015 à 17h16.

    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 !

    Répondre

    • Par Johan Ramon, le 22 septembre 2015 à 10h26.

      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

      Répondre

  • Par Sébastien Delorme, le 17 mai 2016 à 16h00.

    Cette recommandation devient 12.2. plutôt que 11.2. suite à la création de la thématique Zoom et taille de texte.

    Répondre

  • Par Claire Bizingre, le 26 juillet 2016 à 16h56.

    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’attribut aria-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 ?

    Répondre

  • Par Johan Ramon, le 8 août 2016 à 8h55.

    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 sans role="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

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page