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. Si ce lien n’est pas présent, une personne navigant la page à l’aide d’un clavier devra “traverser” tous les menus avant d’arriver au contenu. Les liens d’évitement sont avant tout proposés pour les utilisateurs clavier (personnes déficientes motrices, par exemple).

En anglais, on parle de “Skip links”.

Exemple simple donné par AcceDe Web:

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

On peut masquer ce lien, on le positionne hors champ en lui donnant une position absolue, et une valeur “left” négative:

a.evitement {
   display: inline-block;
   color: #555;
   background: #fff;
   padding: .5em;
   position: absolute;
   left: -99999rem;
   z-index: 100;
}

Pour le rendre visible lors de la navigation au clavier, on ajoute la règle suivante qui réagit au “focus”. Le focus s’active si on navigue sur un élément avec le bouton “tab”.

a.evitement:focus {
   left: 0;
}

Ressources