Générateur de Liens d'Évitement

Créez des liens "Skip to content" accessibles pour permettre aux utilisateurs clavier d'accéder directement au contenu principal (RGAA 12.7).

Guide complet

Techniques de masquage, erreurs à éviter et bonnes pratiques

Configuration

Texte du lien

Utilisez un texte explicite décrivant la destination

ID de la cible

L'ID de votre élément <main> ou conteneur principal

Prévisualisation (au focus)

Aller au contenu principal

Le lien est normalement masqué et apparaît au focus clavier.
Ici, nous le montrons visible avec son indicateur de focus.

HTML

<!-- Skip link - Premier élément après <body> -->
<a href="#main-content" class="skip-link">Aller au contenu principal</a>

<!-- Header, navigation, etc. -->

<!-- Cible du skip link avec tabindex="-1" -->
<main id="main-content" tabindex="-1">
  <!-- Contenu principal -->
</div>

CSS (technique transform recommandée)

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

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

/* Optionnel: supprimer l'outline sur la cible */
main:focus {
  outline: none;
}

Pourquoi c'est obligatoire ?

Pour une personne naviguant au clavier, devoir appuyer 50 fois sur Tab pour traverser le menu avant d'atteindre le contenu est frustrant.

Le RGAA (Critère 12.7) et les WCAG (2.4.1) imposent un lien d'évitement visible au focus, positionné en premier dans le DOM.

Points clés d'implémentation

✓Premier élément après <body>
✓tabindex="-1" sur la cible (pour Safari)
✓Visible au focus avec indicateur
✗Ne jamais utiliser display: none

Besoin de plus de détails ?

Découvrez les 3 techniques de masquage, les 5 erreurs fatales à éviter et l'implémentation React/Next.js.

Lire le guide complet