Dans chaque page web, un lien d’évitement ou d’accès rapide à la zone de contenu principal est-il présent (hors cas particuliers) ?
Un utilisateur qui navigue au clavier doit presser Tab à chaque lien de navigation avant d’atteindre le contenu principal. Sur une page avec un menu de 30 entrées, c’est 30 pressions sur chaque page visitée. Un lien d’évitement règle le problème.
Le critère 12.7 exige qu’un lien permette d’atteindre directement la zone <main> de la page. Ce lien peut être visible en permanence ou n’apparaître qu’à la prise de focus lors d’une tabulation. L’essentiel : il doit exister, il doit fonctionner, et sa cible doit porter un id correspondant dans le DOM.
Pour les sites multi-pages, ce lien doit toujours se trouver au même endroit visuellement et au même ordre relatif dans le code source généré. Un lien d’évitement qui disparaît sur certains gabarits ou change de position selon la page échoue au test 12.7.2.
Une seule règle CSS suffit à implanter un lien invisible par défaut et visible à la prise de focus. C’est l’une des corrections les moins coûteuses du RGAA.
2 tests pour confirmer qu'un lien d'évitement permet de sauter les blocs répétitifs
Lien d'évitement ou d'accès rapide au contenu principal
- Identifiez l’élément
<main>visible dans la page. - Vérifiez qu’au moins l’une des deux conditions suivantes est remplie :
a. Un lien d’évitement précède directement
<main>dans le code source et sa cible correspond à l’idde<main>. b. Un lien d’accès rapide vers<main>devient visible lorsqu’il reçoit le focus au clavier (tabulation). - Si aucune des deux conditions n’est remplie, le test échoue.
Cohérence, visibilité et fonctionnalité du lien d'évitement
- Identifiez le lien d’évitement ou d’accès rapide repéré au test 12.7.1.
- Vérifiez les quatre conditions suivantes :
a. Position constante : le lien se trouve toujours au même endroit visuellement d’une page à l’autre.
b. Ordre source constant : le lien apparaît toujours au même ordre relatif dans le DOM, y compris après rendu JavaScript.
c. Visibilité au focus : le lien devient visible quand il reçoit le focus au clavier.
d. Fonctionnalité : activer le lien déplace effectivement le focus vers la zone
<main>. - Si toutes les conditions sont remplies, le test est validé.
Cas particulier : pour un site à page unique sans navigation répétitive ni contenus additionnels, le critère peut être déclaré non applicable. Cette décision doit être justifiée dans le rapport d’audit.
Exemples
❌ Non conforme : Aucun lien d’évitement présent
<body>
<header>
<nav aria-label="Navigation principale">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Nos services</h1>
<p>Contenu principal...</p>
</main>
</body>Aucun lien d’évitement n’est présent avant le <main>. Un utilisateur au clavier doit traverser tous les liens de navigation à chaque chargement de page. Sur un site avec 20 liens répétitifs, cela représente des dizaines de pressions de Tab inutiles par session.
❌ Non conforme : Lien d’évitement caché avec display: none, jamais atteignable
<style>
.skip-link {
display: none;
}
.skip-link:focus {
display: block;
}
</style>
<body>
<a href="#contenu-principal" class="skip-link">Aller au contenu principal</a>
<header>
<nav aria-label="Navigation principale">
<ul>
<li><a href="/">Accueil</a></li>
</ul>
</nav>
</header>
<main id="contenu-principal">
<h1>Contenu</h1>
</main>
</body>L’utilisation de display:none retire le lien de l’ordre de tabulation. Un élément invisible via display:none ne reçoit jamais le focus, donc le sélecteur :focus ne s’applique jamais. Le lien n’est ni visible ni atteignable au clavier. Le critère 12.7 est en échec.
✅ Conforme : Lien d’évitement visible au focus, fonctionnel
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #005fcc;
color: #ffffff;
padding: 8px 16px;
text-decoration: none;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
</style>
<body>
<a href="#contenu-principal" class="skip-link">Aller au contenu principal</a>
<header>
<nav aria-label="Navigation principale">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="contenu-principal" tabindex="-1">
<h1>Nos services</h1>
<p>Contenu principal...</p>
</main>
</body>Le lien est le premier élément focusable de la page. Il reste hors écran via position: absolute; top: -40px tant qu’il n’a pas le focus, puis apparaît visuellement dès la première pression de Tab. Le tabindex="-1" sur <main> garantit que le focus est bien déplacé vers la zone cible dans tous les navigateurs, y compris Safari.
Astuces et pièges
⚠️ display:none bloque le focus avant qu’il arrive
C’est l’erreur la plus fréquente en audit de ce critère. Le développeur écrit .skip-link { display: none; } .skip-link:focus { display: block; } en croyant que le lien apparaît à la prise de focus. Un élément avec display:none n’est pas focusable, donc le :focus ne se déclenche jamais. Utilisez position: absolute; top: -9999px ou clip-path: inset(100%) à la place.
⚠️ Cible sans id ou id non correspondant
Le lien <a href="#main"> ne fonctionne que si la cible porte exactement id="main". Un <main> sans attribut id, ou un id="contenu" qui ne correspond pas au fragment, donne un lien d’évitement silencieusement non fonctionnel. Le navigateur ne génère aucune erreur visible. Vérifiez toujours la correspondance fragment/id lors de l’audit.
💡 Ajouter tabindex="-1" sur la cible pour Safari
Sans tabindex="-1" sur <main id="contenu-principal">, certains navigateurs déplacent le scroll mais pas le focus clavier. L’utilisateur de lecteur d’écran se retrouve visuellement dans la bonne zone, mais le focus est resté sur le lien d’évitement. Ajoutez tabindex="-1" sur l’élément <main> pour garantir un comportement uniforme.
⚠️ Site à page unique : critère potentiellement non applicable
Sur un site constitué d’une seule page sans navigation répétitive ni blocs additionnels, le critère peut être déclaré non applicable. La justification doit être documentée dans le rapport d’audit. Dès qu’un en-tête ou une barre de navigation substantielle précède le contenu, l’exception ne tient plus.
💡 Le lien d’évitement doit être le premier élément focusable du code source
Placez le lien d’évitement immédiatement après la balise ouvrante <body>, avant tout autre élément interactif. Si un script injecte un widget de chat ou un bouton de consentement avant le lien d’évitement dans le DOM, l’utilisateur doit d’abord traverser ces éléments. Vérifiez toujours l’ordre réel dans le DOM après rendu, pas seulement dans le code source statique.
Questions fréquentes
Quelle visibilité le RGAA exige pour un lien d'évitement : permanent ou uniquement au focus ?
Visible au focus suffit pour satisfaire le RGAA 12.7. Le lien peut être masqué visuellement au repos du moment qu’il apparaît dès qu’il reçoit le focus par tabulation. Certains donnéeurs d’ordre ou chartes graphiques exigent qu’il soit toujours visible : cela dépasse les exigences du critère mais ne pose aucun problème de conformité.
Comment tester qu'un lien d'évitement est fonctionnel selon les critères RGAA 12.7 ?
Ouvrez la page dans un navigateur, appuyez sur Tab une fois dès le chargement. Le lien doit apparaître. Appuyez sur Entrée. Appuyez à nouveau sur Tab : le prochain élément focalisé doit être dans le contenu principal, pas dans la navigation. Avec un lecteur d’écran (NVDA ou VoiceOver), le curseur doit annoncer le premier élément du <main> après l’activation du lien.
Comment structurer les liens d'évitement RGAA quand un site comporte plusieurs zones répétitives ?
Non. Le critère 12.7 n’exige qu’un seul lien permettant d’accéder au contenu principal. Un unique <a href="#contenu">Aller au contenu</a> suffit. Les liens d’évitement vers d’autres zones (navigation, recherche, pied de page) relèvent du critère 12.6, qui est un critère distinct.
Comment maintenir un lien d'évitement RGAA fonctionnel dans une SPA (React, Vue, Next.js) ?
Seulement si le focus est géré correctement après chaque changement de route. Après une navigation interne, l’ancre #contenu doit exister dans le DOM rendu et le focus doit être déplacé manuellement (vers le <main> ou le <h1>). C’est le point de défaillance le plus courant dans les applications JavaScript : testez systématiquement le lien après plusieurs navigations internes, pas uniquement au chargement initial.
Quel intitulé choisir pour un lien d'évitement RGAA : générique ou spécifique à la zone cible ?
« Aller au contenu » ou « Aller au contenu principal » sont tous deux explicites et conformes aux critères 6.1 et 6.2 du RGAA (intitulé de lien). Évitez les formulations vagues comme « Passer » ou « Skip » (en anglais sur un site français). Le texte doit permettre à un utilisateur de lecteur d’écran de comprendre la destination avant d’activer le lien.