Lien d'évitement absent : critère RGAA 12.7 et correction

Q: L'utilisation de landmarks ARIA remplace-t-elle le skip link ?

Non. Les landmarks ( <main> , <nav> , role="main" ) aident les utilisateurs de lecteurs d'écran à se repérer, mais ils ne permettent pas de sauter des éléments en navigation clavier sans lecteur d'écran. Le skip link reste nécessaire pour valider le critère 12.7.

C'est quoi

Un lien d'évitement est un lien placé en tout début de page, avant la navigation, qui pointe vers une ancre du contenu principal. Il permet de "sauter" les blocs répétitifs : menu, bandeau, fil d'Ariane.

Le RGAA 12.7 exige qu'il soit présent et fonctionnel. Il peut être visuellement masqué par défaut, à condition de devenir visible à la prise de focus clavier.

Un site peut proposer plusieurs liens d'accès rapide (vers la navigation, vers le moteur de recherche). Mais le critère 12.7 porte spécifiquement sur la présence d'un lien vers la zone de contenu principal : c'est celui-là qui est obligatoire.

Qui est touché

Les personnes qui naviguent exclusivement au clavier : elles doivent sinon appuyer sur Tab autant de fois qu'il y a d'éléments interactifs dans la navigation avant d'atteindre le contenu.
Les personnes utilisant un lecteur d'écran : la navigation répétitive sur chaque page est épuisante et ralentit considérablement la lecture.
Les personnes souffrant de troubles moteurs ou de fatigabilité : chaque Tab supplémentaire a un coût physique réel.

Impact business

C'est une erreur structurelle qui touche chaque page, sur chaque visite. Un utilisateur clavier sans skip link doit traverser toute la navigation à chaque changement de page - sur un menu de 20 liens, cela représente 20 appuis sur Tab avant d'atteindre le contenu.

L'impact est constant et cumulatif : il s'aggrave avec la taille du menu et la fréquence de navigation. Sur un site avec une navigation riche, l'absence de lien d'évitement rend la consultation significativement pénible, voire décourageante.

Le rapport WebAIM Million confirme que le lien d'évitement reste rare en pratique : une faible minorité des pages d'accueil analysées en propose un. L'absence de skip link est donc la situation la plus courante, pas l'exception.

Sources des chiffres

Comment le détecter

Audit Mynto : le scan vérifie la présence d'un lien d'évitement avant le premier bloc de navigation.
Manuel (clavier) : charge la page et appuie sur Tab immédiatement. Le premier (ou un des premiers) éléments focusés doit être un lien vers le contenu principal. Si le focus part directement sur le logo ou le premier lien du menu, le skip link est absent ou dysfonctionnel.
Manuel (code) : cherche un <a href="#main-content"> ou équivalent en toute première position dans le <body>. Vérifie que l'ancre cible (id="main-content" ou similaire) existe bien dans la page.
Vérifie aussi que le lien n'est pas masqué de façon permanente (display: none ou visibility: hidden) : il doit devenir visible au focus.

Comment corriger

Avant - HTML

<body>
  <nav>
    <a href="/">Accueil</a>
    <a href="/tarifs">Tarifs</a>
  </nav>
  <main>
    <h1>Contenu principal</h1>
  </main>
</body>

Après - HTML

<body>
  <a href="#main-content" class="skip-link">Aller au contenu principal</a>
  <nav>
    <a href="/">Accueil</a>
    <a href="/tarifs">Tarifs</a>
  </nav>
  <main id="main-content" tabindex="-1">
    <h1>Contenu principal</h1>
  </main>
</body>

<!-- CSS associé -->
<style>
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: #000;
  color: #fff;
}
</style>

Deux éléments sont nécessaires :

Le lien : placé en toute première position dans le <body>, avant tout autre élément interactif. Il pointe vers une ancre du contenu principal (#main-content). Son texte doit être explicite : "Aller au contenu principal".
L'ancre cible : l'élément <main> (ou tout autre conteneur du contenu principal) doit porter l'id correspondant. Ajoute tabindex="-1" pour garantir que le focus se déplace bien sur l'élément même si ce n'est pas un élément naturellement focusable.

Le lien peut être visuellement masqué au repos - avec position: absolute et un décalage hors écran - à condition d'être visible dès qu'il reçoit le focus.

Sur WordPress, ce lien est à ajouter dans header.php, juste après l'ouverture du <body>. La plupart des thèmes WordPress récents, y compris les thèmes par défaut (Twenty Twenty et suivants), l'incluent déjà nativement.

Questions fréquentes

Le lien d'évitement doit-il être visible en permanence ?

Non. Il peut être masqué visuellement tant qu'il devient visible et exploitable dès qu'il reçoit le focus clavier. L'important est qu'un utilisateur naviguant au clavier puisse le voir et l'activer. Évite display: none et visibility: hidden qui le retirent complètement de l'ordre de tabulation.

Un seul skip link suffit-il ?

Pour la plupart des sites, un lien vers le contenu principal suffit à valider le critère 12.7. Si ton site a plusieurs blocs répétitifs importants (navigation secondaire, moteur de recherche), tu peux en ajouter d'autres. Dans tous les cas, le premier doit pointer vers le contenu.

L'utilisation de landmarks ARIA remplace-t-elle le skip link ?

Non. Les landmarks (<main>, <nav>, role="main") aident les utilisateurs de lecteurs d'écran à se repérer, mais ils ne permettent pas de sauter des éléments en navigation clavier sans lecteur d'écran. Le skip link reste nécessaire pour valider le critère 12.7.

Mon thème WordPress inclut-il déjà un skip link ?

La plupart des thèmes WordPress récents, y compris les thèmes par défaut (Twenty Twenty et suivants), incluent un lien d'évitement nativement. Vérifie en appuyant sur Tab dès le chargement de la page.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Lien d'évitement absent