Un skip-link (lien d'évitement) permet à un utilisateur au clavier ou au lecteur d'écran de sauter le header — logo, menu, recherche, fil d'Ariane — pour atterrir directement sur le contenu. Sans lui, il doit tabuler à travers 20 à 40 éléments répétés sur chaque page avant d'atteindre l'essentiel. C'est le critère 12.7 du RGAA, applicable à toutes les pages, et il tient en une quinzaine de lignes.

Implémentation minimale

<!-- Première chose après <body> -->
<a href="#main" class="skip-link">Aller au contenu</a>

<header>...</header>
<main id="main" tabindex="-1">...</main>
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #0B0B0E;
  color: #FFF;
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

✓ Ce qui rend ce pattern bien fait

Le lien est invisible par défaut mais devient visible au focus (premier Tab). Enter saute jusqu'à `#main`, focalisable grâce à `tabindex="-1"`. L'utilisateur reprend ensuite Tab depuis le contenu, sans avoir traversé le header.

Les 3 erreurs à éviter

  • →Le cacher avec `display: none` : il disparaît aussi pour le clavier et ne sert plus à rien — utilisez le décalage hors écran, comme ci-dessus
  • →Oublier le `tabindex="-1"` sur la cible : sans lui, le focus ne se pose pas vraiment sur `<main>` dans certains navigateurs
  • →Le placer après le menu : il doit être le tout premier élément focusable de la page

Au-delà du skip-link : la navigation clavier

Le skip-link n'est qu'une brique. Une page réellement navigable au clavier suppose aussi un ordre de tabulation logique (critère 12.8), un focus toujours visible (critère 10.7) et aucun piège au clavier — on doit pouvoir entrer ET sortir de chaque composant. Le skip-link est le test d'entrée : s'il manque, le reste manque souvent aussi.

// Plusieurs skip-links ?

Sur un site complexe, on peut en proposer plusieurs : "Aller au contenu", "Aller à la recherche", "Aller au menu". Un seul vers le contenu principal suffit à la conformité, mais les autres améliorent réellement le confort de navigation.

Questions fréquentes

Le skip-link doit-il être visible en permanence ?

Non. Il peut rester masqué tant qu'il n'a pas le focus, puis apparaître au premier Tab. L'important est qu'il devienne visible au focus et ne soit jamais retiré de l'ordre de tabulation.

Où le placer dans un site Nuxt ou React ?

Dans le layout racine, tout en haut, avant le header, de sorte qu'il soit le premier nœud focusable rendu. La cible `#main` est l'élément `<main>` de la page.

Un méga-menu change-t-il quelque chose ?

Oui : plus le header est riche, plus le skip-link est utile, car le nombre de tabulations à éviter augmente. C'est précisément sur les sites à méga-menu qu'il fait gagner le plus de temps.

Vérifier la présence et le bon fonctionnement du skip-link sur tout votre site :

→ Lancer un audit