Skip links : Le lien d'évitement parfait pour l'accessibilité

Le skip link (ou lien d'évitement en français) est l'une des fonctionnalités d'accessibilité les plus simples à implémenter et les plus impactantes. Pourtant, beaucoup de sites l'oublient ou l'implémentent incorrectement.

[!TIP] Générez votre skip link en quelques clics avec notre générateur de liens d'évitement. Code HTML et CSS prêt à copier !

Pourquoi le skip link est essentiel ?

L'expérience utilisateur au clavier

Imaginez naviguer au clavier sur un site e-commerce avec un méga-menu de 80 liens. À chaque page, vous devez :

Tabuler 80 fois pour passer le menu
Recommencer à chaque nouvelle page visitée
Perdre le fil de votre navigation

Pour une personne utilisant uniquement le clavier (handicap moteur, utilisateur de lecteur d'écran), c'est un cauchemar de répétition.

Le skip link résout ce problème en offrant un raccourci direct vers le contenu principal dès la première tabulation.

Qui bénéficie du skip link ?

Utilisateur	Bénéfice
Utilisateurs de clavier	Évite de tabuler 50+ fois
Utilisateurs de lecteur d'écran	Navigation plus rapide
Utilisateurs avec handicap moteur	Moins de mouvements répétitifs
Power users	Raccourci efficace

[!NOTE] Le skip link est obligatoire selon le RGAA (critère 12.7) et les WCAG (2.4.1 "Bypass Blocks").

L'anatomie d'un skip link parfait

Un skip link efficace a plusieurs caractéristiques :

Premier élément focusable de la page (juste après <body>)
Masqué visuellement par défaut
Visible au focus clavier
Pointe vers une cible existante avec tabindex="-1"
Texte explicite décrivant la destination

Implémentation HTML/CSS

Le code HTML

CODE

<body>
  <!-- Le skip link en TOUT premier -->
  <a href="#main-content" class="skip-link">
    Aller au contenu principal
  </a>
  
  <header>
    <nav>
      <!-- 50 liens de navigation... -->
    </nav>
  </header>
  
  <!-- La cible avec tabindex="-1" -->
  <main id="main-content" tabindex="-1">
    <h1>Titre de la page</h1>
    <!-- Contenu de la page -->
  </main>
  
  <footer>
    <!-- ... -->
  </footer>
</body>

Le CSS avec transform (recommandé)

CODE

.skip-link {
  /* Positionné en haut à gauche */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  
  /* Style du lien */
  padding: 1rem 1.5rem;
  background: #0066cc;
  color: white;
  font-weight: bold;
  text-decoration: none;
  
  /* Masqué hors écran avec transform */
  transform: translateY(-100%);
  transition: transform 0.2s ease-in-out;
}

.skip-link:focus {
  /* Visible quand focus */
  transform: translateY(0);
  
  /* Indicateur de focus visible */
  outline: 3px solid #ffcc00;
  outline-offset: 2px;
}

Trois techniques de masquage

Il existe plusieurs façons de masquer visuellement un skip link tout en le gardant accessible au clavier.

1. La technique `transform` (recommandée)

CODE

.skip-link {
  transform: translateY(-100%);
}
.skip-link:focus {
  transform: translateY(0);
}

Avantages : Animation fluide, pas de problème de performance.

2. La technique `clip-path`

CODE

.skip-link {
  clip-path: inset(50%);
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  clip-path: none;
  width: auto;
  height: auto;
  overflow: visible;
}

Avantages : Gestion classique du masquage accessible.

3. La technique `position` hors écran

CODE

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

Avantages : Simple et compatible avec tous les navigateurs anciens.

[!WARNING] N'utilisez jamais display: none ou visibility: hidden pour masquer un skip link ! Ces propriétés le rendent inaccessible au clavier.

Pourquoi tabindex="-1" sur la cible ?

L'attribut tabindex="-1" sur <main> permet de recevoir le focus programmatiquement (via JavaScript ou lien ancre) sans être ajouté à l'ordre de tabulation naturel.

Sans cela, certains navigateurs (notamment Safari) ne déplacent pas le focus vers la cible après un clic sur le skip link. L'utilisateur reste "bloqué" visuellement au même endroit.

CODE

<!-- Correct : le focus se déplacera vers main -->
<main id="main-content" tabindex="-1">

<!-- Problème dans Safari : le focus peut ne pas se déplacer -->
<main id="main-content">

Note sur l'outline de la cible

Quand le focus est sur <main>, un outline peut apparaître. Si c'est indésirable visuellement :

CODE

main:focus {
  outline: none;
}

/* OU garder un indicateur subtil */
main:focus {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

Skip links multiples

Pour les sites complexes (comme les applications web), vous pouvez proposer plusieurs destinations :

CODE

<nav class="skip-links" aria-label="Liens d'évitement">
  <a href="#main-content" class="skip-link">Contenu principal</a>
  <a href="#main-nav" class="skip-link">Menu de navigation</a>
  <a href="#search" class="skip-link">Recherche</a>
  <a href="#footer" class="skip-link">Pied de page</a>
</nav>

Ces liens peuvent s'afficher en cascade au focus :

CODE

.skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

.skip-link {
  display: block;
  transform: translateY(-100%);
  transition: transform 0.2s;
}

.skip-link:focus {
  transform: translateY(0);
}

Implémentation Next.js / React

Composant réutilisable

CODE

// components/SkipLink.tsx
export default function SkipLink() {
  return (
    <a 
      href="#main-content" 
      className="absolute left-4 top-4 z-[100] -translate-y-[200%] 
                 rounded-lg bg-blue-600 px-4 py-2 text-white 
                 shadow-lg transition-transform 
                 focus:translate-y-0 focus:outline-none 
                 focus:ring-2 focus:ring-white focus:ring-offset-2"
    >
      Aller au contenu principal
    </a>
  );
}

Intégration dans le layout

CODE

// app/layout.tsx
import SkipLink from '@/components/SkipLink';

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>
        <SkipLink />
        <Header />
        <main id="main-content" tabIndex={-1}>
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}

[!TIP] Avec Tailwind CSS, utilisez .sr-only pour masquer et .not-sr-only au focus, ou la technique .-translate-y-full / focus:translate-y-0.

Les 5 erreurs fatales à éviter

1. Erreur : Masquer avec display: none

CODE

/* ERREUR FATALE : Le lien ne peut pas recevoir le focus ! */
.skip-link {
  display: none;
}
.skip-link:focus {
  display: block;
}

Pourquoi c'est faux ? Un élément en display: none est retiré de l'arbre d'accessibilité. Il ne peut pas recevoir le focus clavier.

2. Erreur : Utiliser visibility: hidden

CODE

/* Même problème que display: none */
.skip-link {
  visibility: hidden;
}

3. Erreur : Cible inexistante

CODE

<!-- L'ID "content" n'existe nulle part ! -->
<a href="#content" class="skip-link">Aller au contenu</a>

<!-- Dans le HTML... -->
<main id="main-content"><!-- Oups, mauvais ID --></main>

Conséquence : Le lien ne fait rien ou scroll vers le haut de la page.

4. Erreur : Z-index insuffisant

CODE

/* Le header sticky passe AU-DESSUS du skip link */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.skip-link {
  z-index: 10; /* Trop bas ! */
}

Solution : Donnez au skip link le z-index le plus élevé de votre site.

5. Erreur : Pas d'indicateur de focus visible

CODE

/* ERREUR : Le lien apparaît mais sans indication visuelle */
.skip-link:focus {
  transform: translateY(0);
  outline: none; /* Supprimé ! */
}

Solution : Gardez toujours un outline ou ajoutez un style alternatif (box-shadow, bordure).

Test du skip link

Test manuel (30 secondes)

Ouvrez votre site
Appuyez sur Tab une seule fois
Le skip link doit apparaître visuellement
Appuyez sur Entrée
Le focus doit se déplacer vers le contenu principal
Appuyez à nouveau sur Tab
Le prochain élément focusable doit être dans le contenu (pas le header)

Test avec lecteur d'écran

Avec NVDA ou VoiceOver :

Le lien est annoncé dès la première tabulation
"Aller au contenu principal, lien"
Après activation, le lecteur commence à lire le contenu principal

Test automatisé avec RGAA Checker

Notre outil vérifie automatiquement le critère 12.7 :

Présence d'un lien d'évitement
Cible existante et focusable
Visibilité au focus

Lancez un scan gratuit pour vérifier votre implémentation.

Checklist skip link RGAA

Le skip link est le premier élément focusable de la page
Il pointe vers une cible existante (#main-content)
La cible a tabindex="-1" pour recevoir le focus
Le lien est masqué visuellement mais accessible (pas display: none)
Le lien devient visible au focus avec un contraste ≥ 4.5:1
L'indicateur de focus est visible (outline ou alternative)
Le z-index est le plus élevé du site
Le texte est explicite ("Aller au contenu principal", pas "Skip")
Testé au clavier ET au lecteur d'écran

Critère RGAA 12.7

"Dans chaque page web, un lien d'évitement ou d'accès rapide au contenu principal est-il présent (hors cas particuliers) ?"

Le critère est conforme si :

Un lien permet d'éviter la navigation répétitive
Ce lien est le premier élément focusable OU fait partie d'un groupe de liens d'accès rapide
La cible du lien est le contenu principal ou une zone pertinente
Le lien est visible à la prise de focus

Générez votre skip link

Vous ne voulez pas coder à la main ? Utilisez notre générateur de liens d'évitement :

Personnalisez le texte du lien
Définissez l'ID de la cible
Copiez le code HTML et CSS généré
Prévisualisez le résultat en temps réel

Conclusion

Le skip link est une victoire rapide en accessibilité : 10 lignes de HTML/CSS pour un impact majeur sur l'expérience des utilisateurs clavier et lecteurs d'écran.

C'est souvent le premier élément vérifié lors d'un audit RGAA. Ne le négligez pas !

Ressources :

Skip links : Le lien d'évitement parfait pour l'accessibilité

En Bref : L'essentiel à retenir

Pourquoi le skip link est essentiel ?

L'expérience utilisateur au clavier

Qui bénéficie du skip link ?

L'anatomie d'un skip link parfait

Implémentation HTML/CSS

Le code HTML

Le CSS avec transform (recommandé)

Trois techniques de masquage

1. La technique `transform` (recommandée)

2. La technique `clip-path`

3. La technique `position` hors écran

Pourquoi tabindex="-1" sur la cible ?

Note sur l'outline de la cible

Skip links multiples

Implémentation Next.js / React

Composant réutilisable

Intégration dans le layout

Les 5 erreurs fatales à éviter

1. Erreur : Masquer avec display: none

2. Erreur : Utiliser visibility: hidden

3. Erreur : Cible inexistante

4. Erreur : Z-index insuffisant

5. Erreur : Pas d'indicateur de focus visible

Test du skip link

Test manuel (30 secondes)

Test avec lecteur d'écran

Test automatisé avec RGAA Checker

Checklist skip link RGAA

Critère RGAA 12.7

Générez votre skip link

Conclusion

Guides RGAA associés

Articles similaires

Aria-label et aria-labelledby : Guide pratique avec exemples

Dark mode et accessibilité : Le guide complet

Formulaires accessibles & RGAA : Le guide complet (2025)

Votre site est-il conforme ?

Pourquoi le skip link est essentiel ?

L'expérience utilisateur au clavier

Qui bénéficie du skip link ?

L'anatomie d'un skip link parfait

Implémentation HTML/CSS

Le code HTML

Le CSS avec transform (recommandé)

Trois techniques de masquage

1. La technique transform (recommandée)

2. La technique clip-path

3. La technique position hors écran

Pourquoi tabindex="-1" sur la cible ?

Note sur l'outline de la cible

Skip links multiples

Implémentation Next.js / React

Composant réutilisable

Intégration dans le layout

Les 5 erreurs fatales à éviter

1. Erreur : Masquer avec display: none

2. Erreur : Utiliser visibility: hidden

3. Erreur : Cible inexistante

4. Erreur : Z-index insuffisant

5. Erreur : Pas d'indicateur de focus visible

Test du skip link

Test manuel (30 secondes)

Test avec lecteur d'écran

Test automatisé avec RGAA Checker

Checklist skip link RGAA

Critère RGAA 12.7

Générez votre skip link

Conclusion

Guides RGAA associés

Articles similaires

Aria-label et aria-labelledby : Guide pratique avec exemples

Dark mode et accessibilité : Le guide complet

Formulaires accessibles & RGAA : Le guide complet (2025)

Votre site est-il conforme ?

1. La technique `transform` (recommandée)

2. La technique `clip-path`

3. La technique `position` hors écran