Critère 12.11 – Liens d’évitement

This post is also available in: English (Anglais)

Un lien d’évitement doit être présent sur la page et être focusable pour passer le menu de navigation.

Le lien d’évitement doit être placé en début de page juste après la balise d’ouverture body.

Implémentation:

Au dessus de la page

<div id="skip">
<a href="#main">Skip Menu</a>
</div>

Conteneur de contenu principal

<main id="main" role ="main" tabindex="-1">

tabindex= »-1″est recommandé pour la compatibilité avec tous les navigateurs.

Il est possible de cacher le menu d’évitement pour le rendre visible à la première tabulation.

Dans ce cas, ces 3 méthodes sont à proscrire :

  • CSS pour positionner de manière permanente le lien en dehors de l’écran
  • display: none
  • visibility: invisible

La première méthode ne fonctionne que pour les lecteurs d’écran. Les 2 autres sont inaccessibles pour tous les utilisateurs.

Les 2 moyens accessibles sont:

  • Laisser le « skip navigation » visible de manière permanente
  • Utiliser CSS pour cacher le lien jusqu’à ce qu’il reçoive le focus et le rendre alors visible pour tous.

Exemple d’implémentation pour la deuxième solution :

#skip a {
display: block;
position: absolute;
left: -999px;
top: -999px;
}

#skip a:focus {
left: 0;
top: 0;
padding: 3px;
background: #ffc;
border:1px solid #990000;
}

Il est possible d’ajouter d’autres liens d’évitement pour atteindre le Nav, le footer ou search mais la navigation au clavier sera alors ralentie.