Composant accessible · outil gratuit

Lien d'évitement accessible (« Aller au contenu ») : code vérifié

Le lien d'évitement est le premier lien de la page : « Aller au contenu ». Il permet de sauter l'en-tête et le menu, répétés sur chaque page, pour arriver directement au contenu principal. Il peut rester hors de l'écran tant qu'il n'a pas le focus, mais doit devenir visible dès qu'on y arrive au clavier.

Critères RGAA 4.1.2 : 12.7 · WCAG 2.2 : 2.4.1 · mis à jour le 2 novembre 2026.

Générer et vérifier le composant

Réglez le composant : le code se met à jour, l'aperçu fonctionne pour de vrai, et chaque version est vérifiée en direct par les contrôles du composant, un test de comportement et axe-core. « Introduire une erreur fréquente » montre ce que chaque contrôle détecte ; « Tester mon code » vérifie le vôtre.

Réglages

Texte du lien

Affichage

Ajouter « Aller au menu »

Introduire une erreur fréquente

Pour voir le contrôle qui la détecte (les erreurs de comportement apparaissent avec « Tester le comportement »).

<a class="evitement" href="#contenu">Aller au contenu</a>
<header class="entete">
  <p class="logo">Mon site</p>
  <nav id="menu" aria-label="Principal">
    <ul>
      <li><a href="/">Accueil</a></li>
      <li><a href="/produits">Produits</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>
<main id="contenu" tabindex="-1">
  <h1>Titre de la page</h1>
  <p>Le contenu principal commence ici.</p>
</main>

Aperçu réel (utilisable à la souris et au clavier)

Vérification en direct

Qui est gêné quand le composant est mal fait

Personnes qui naviguent au clavier : sans lien d'évitement, elles traversent tout l'en-tête et le menu, à chaque page, avant d'atteindre le contenu.
Personnes qui utilisent un contacteur : chaque élément traversé leur coûte une action : un menu de 30 liens, c'est 30 actions à chaque page.
Personnes malvoyantes qui utilisent une loupe : un lien visible au focus leur montre où elles sont et où il mène.

Le comportement attendu

Au clavier

Touche ou moment	Ce qui doit se passer
Tab (premier appui sur la page)	Le lien « Aller au contenu » reçoit le focus et apparaît.
Entrée	La page saute au contenu principal ; le Tab suivant atteint le premier élément du contenu, sans repasser par le menu.

Avec un lecteur d'écran

Le lien est annoncé comme les autres : « lien, Aller au contenu ».
Les lecteurs d'écran ont aussi leurs raccourcis (repères, titres) : le lien d'évitement sert surtout aux personnes qui naviguent au clavier sans lecteur d'écran.

Les erreurs les plus fréquentes

Masqué avec display: none. Le lien n'existe plus pour personne, ni au clavier ni au lecteur d'écran.
Jamais visible. Hors de l'écran même au focus : la personne au clavier ne voit pas où elle est.
Une cible absente. L'ancre visée (#contenu) n'existe pas ou a changé de nom : le lien ne fait rien.
Placé après le menu. Il arrive trop tard : on a déjà traversé ce qu'il devait éviter.

Tester soi-même

Rechargez la page et appuyez une fois sur Tab : le lien doit apparaître.
Appuyez sur Entrée, puis sur Tab : le focus doit arriver dans le contenu principal, pas dans le menu.
Recommencez sur plusieurs gabarits de page : le lien doit être présent partout, au même endroit.

Ce qu'Accessia détecte dans un audit

Accessia signale automatiquement l'absence de lien d'évitement (critère 12.7), en analyse du code comme dans l'extension Chrome ; avec le rendu navigateur, axe-core vérifie aussi que la cible d'un lien d'évitement existe. La visibilité au focus se constate au clavier : le module « Ordre de tabulation » de l'extension montre le premier élément atteint.

Auditer une page gratuitement, ou vérifiez ce composant directement dans votre éditeur de code avec le serveur MCP d'Accessia.

Critères RGAA concernés

Critère 12.7 : Lien d'évitement vers le contenu

Questions fréquentes

Le lien doit-il être visible en permanence ?

Non : le RGAA accepte un lien visible à la prise de focus. Il ne doit simplement jamais rester invisible quand il a le focus.

Faut-il tabindex="-1" sur la cible ?

Ce n'est pas exigé, mais c'est utile : il garantit que le focus entre vraiment dans le contenu dans tous les navigateurs, au lieu d'y placer seulement le point de départ de la navigation.

Les repères (header, nav, main) ne suffisent-ils pas ?

Pour le critère 12.6, les repères suffisent. Le critère 12.7 demande en plus un lien d'évitement ou d'accès rapide au contenu principal, qui sert aux personnes qui naviguent au clavier sans lecteur d'écran.

Ce code rend-il mon site conforme ?

Il rend ce lien conforme aux contrôles affichés. Il doit ensuite être présent et identique sur chaque page.