Skip links
Les skip links (liens d'évitement) sont des liens placés en tout début de page qui permettent aux utilisateurs au clavier de sauter directement au contenu principal, sans tabuler à travers le menu de navigation. Masqués par défaut, ils apparaissent au focus clavier. Le critère WCAG 2.4.1 (niveau A) les exige sur toute page comportant des blocs répétitifs.
Un site e-commerce avec un méga-menu de 80 liens. Vous naviguez au clavier. Chaque nouvelle page vous oblige à tabuler à travers ces 80 liens avant d'atteindre le contenu. Le skip link règle ce problème en une seule touche.
#Comment ça fonctionne
Le skip link est un lien interne (<a href="#main-content">) placé comme premier élément focusable de la page. Au clic ou à l'activation clavier, il déplace le focus directement vers le contenu principal.
<body>
<a href="#contenu" class="skip-link">Aller au contenu</a>
<header>
<nav><!-- 40 liens de navigation --></nav>
</header>
<main id="contenu" tabindex="-1">
<!-- contenu principal -->
</main>
</body>Le tabindex="-1" sur <main> garantit que le focus se déplace correctement vers la cible dans tous les navigateurs. Sans lui, certains navigateurs déplacent la vue mais pas le curseur clavier.
Côté style, le lien est masqué hors écran et réapparaît au focus :
.skip-link {
position: absolute;
left: -99999rem;
z-index: 100;
}
.skip-link:focus {
left: 0;
top: 0;
padding: 0.5em 1em;
background: #000;
color: #fff;
}Le critère WCAG 2.4.1 (niveau A) rend ce mécanisme obligatoire sur toute page avec des blocs répétitifs. Le RGAA reprend cette exigence au critère 12.7.
#Les erreurs qui cassent tout
Selon le WebAIM Million 2023, seuls 17 % des pages d'accueil du million de sites les plus visités proposent un skip link. Parmi celles qui en ont un, une sur six est cassé.
Trois erreurs reviennent systématiquement :
-
display: noneouvisibility: hiddenpour masquer le lien. Ces propriétés le retirent de l'arbre d'accessibilité. Le lien devient inaccessible au clavier et aux lecteurs d'écran. -
Cible inexistante. Le
hrefpointe vers unidqui n'est pas dans la page. Le lien ne mène nulle part. -
Pas de style
:focus. Le lien fonctionne pour les lecteurs d'écran, mais les utilisateurs voyants qui naviguent au clavier ne le voient jamais. Les WCAG 2.4.7 exigent qu'il soit visible au focus.
#En résumé
Un <a> en haut de page, un id sur <main>, un style qui apparaît au focus. Trois éléments, quelques lignes de code, et vos utilisateurs au clavier gagnent des dizaines de tabulations sur chaque page.