Lien d'accès rapide

Un lien d'accès rapide permet d'accéder rapidement à une zone de contenu de la page ou de sauter une zone dans la page.

Règles d’implémentation pour l’accessibilité

Dans ce motif de conception, le lien d’accès rapide, parfois appelé aussi lien d’évitement (skip link en anglais) lorsqu’il permet de sauter une zone de la page, est invisible par défaut sur la page et n’apparaît qu’à la prise de focus pour une navigation au clavier.
Le critère 12.7 du référentiel général d’amélioration de l’acccessibilité (RGAA) rend obligatoire la présence d’un lien d’accès rapide au contenu principal.

Visuel

Pour tester les liens d’accès rapide, placez-vous en haut de cette page et naviguer au clavier (touche " tab " pour se déplacer, touche " entrée " pour " cliquer " sur le lien).

Extraits de code

Code HTML

<body>
    <a class="evitement" href="#contenu">Aller au contenu</a> 
    <header role="banner">
...

Code CSS

Il existe plusieurs façons de rendre son lien invisible en voici une :

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