RGAA 12.7 — Dans chaque page web, un lien d'évitement ou d'accès rapide à la zone de contenu principal est-il présent ?

Lien d'évitement absent

Le problème

Le lien d'évitement (skip link) est un mécanisme de navigation essentiel pour les utilisateurs de clavier. Le critère 12.7 du RGAA exige la présence d'un lien permettant d'accéder directement à la zone de contenu principal, en sautant les éléments de navigation répétitifs (en-tête, menu principal, barre latérale). Sans ce lien, l'utilisateur doit traverser tous les éléments de navigation avec Tab à chaque changement de page — ce qui peut représenter des dizaines, voire des centaines d'appuis sur Tab avant d'atteindre le contenu. Imaginez un site avec un en-tête contenant un logo, un menu principal à 8 entrées, chacune avec un sous-menu de 5 liens, plus des liens de connexion et un sélecteur de langue. Cela représente plus de 50 éléments focusables avant le contenu principal. Pour un utilisateur clavier, traverser ces 50 éléments à chaque page est une perte de temps considérable. Le lien d'évitement résout ce problème en un seul appui sur Tab. Le lien d'évitement est typiquement le tout premier élément focusable de la page. Il est masqué visuellement par défaut et apparaît quand il reçoit le focus clavier (technique CSS sr-only + focus:not-sr-only). Au clic ou à l'activation au clavier, il déplace le focus vers la zone de contenu principal identifiée par son id (généralement #main-content ou #contenu). Le RGAA peut aussi exiger des liens d'accès rapide supplémentaires vers d'autres zones importantes : le menu de navigation, le moteur de recherche, le pied de page. La bonne pratique est de fournir au minimum un lien vers le contenu principal, et d'ajouter des liens vers les autres zones si le site est complexe. Attention : le lien d'évitement doit réellement fonctionner. Un lien qui pointe vers un id inexistant ou qui ne déplace pas le focus ne remplit pas son rôle. Il est important de tester le fonctionnement effectif du lien au clavier.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Impact sur les utilisateurs

Pour un utilisateur de clavier, l'absence de lien d'évitement transforme chaque visite de page en parcours d'obstacles. Sur un site de 50 éléments de navigation, consulter 10 pages signifie 500 appuis sur Tab supplémentaires juste pour traverser la navigation. C'est un gaspillage de temps et d'énergie qui rend la navigation pénible et fatigante. Les personnes en situation de handicap moteur qui utilisent un contacteur ou un système de commande par le souffle sont les plus impactées : chaque appui sur Tab leur demande un effort physique réel. Multiplier cet effort par le nombre de liens de navigation à chaque page peut rendre un site effectivement inutilisable. Les utilisateurs de lecteurs d'écran sont aussi affectés : ils doivent écouter l'annonce de chaque lien de navigation avant d'atteindre le contenu, ce qui allonge considérablement le temps de consultation. Certains lecteurs d'écran offrent des raccourcis pour sauter aux landmarks ARIA, mais le lien d'évitement reste nécessaire car tous les utilisateurs n'utilisent pas ces raccourcis avancés.

Exemple de code

Avant (non conforme)
<body>
  <header>
    <nav>
      <a href="/">Accueil</a>
      <a href="/produits">Produits</a>
      <a href="/services">Services</a>
      <a href="/about">À propos</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main>
    <h1>Bienvenue</h1>
    <!-- Contenu principal -->
  </main>
</body>
Après (conforme)
<body>
  <!-- Lien d'évitement : premier élément focusable -->
  <a href="#main-content" class="sr-only focus:not-sr-only
    focus:absolute focus:top-2 focus:left-2 focus:z-50
    focus:px-4 focus:py-2 focus:bg-primary focus:text-white
    focus:rounded-lg">
    Aller au contenu principal
  </a>
  <header>
    <nav aria-label="Navigation principale">
      <a href="/">Accueil</a>
      <a href="/produits">Produits</a>
      <a href="/services">Services</a>
      <a href="/about">À propos</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main id="main-content">
    <h1>Bienvenue</h1>
    <!-- Contenu principal -->
  </main>
</body>

Questions fréquentes

Le lien d'évitement doit-il être visible en permanence ?
Non. Le RGAA autorise les liens d'évitement masqués visuellement tant qu'ils deviennent visibles à la prise de focus clavier. C'est la technique la plus courante : le lien est en sr-only par défaut et apparaît en position fixe quand il reçoit le focus. Certains sites choisissent de le rendre visible en permanence, ce qui est aussi acceptable.
Vers quel élément le lien d'évitement doit-il pointer ?
Le lien doit pointer vers la zone de contenu principal, généralement la balise <main> ou un conteneur identifié par un id unique. L'id cible doit exister dans la page. Vérifiez que le focus se déplace effectivement vers cet élément au clic. Si l'élément cible n'est pas nativement focusable, ajoutez tabindex="-1" pour qu'il puisse recevoir le focus programmatiquement.
Faut-il un lien d'évitement sur chaque page ?
Oui. Le lien d'évitement doit être présent sur chaque page du site, pas seulement sur la page d'accueil. L'utilisateur clavier peut arriver sur n'importe quelle page via un lien externe ou un moteur de recherche. Le lien d'évitement est généralement implémenté dans le composant de layout global pour être présent partout automatiquement.
Peut-on avoir plusieurs liens d'évitement ?
Oui. Vous pouvez ajouter des liens d'accès rapide vers d'autres zones de la page : « Aller à la navigation », « Aller à la recherche », « Aller au pied de page ». Regroupez ces liens dans une liste ou une barre d'accès rapide. Le lien vers le contenu principal reste le plus important et doit être le premier.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit