Critère 12.7
Lien d'évitement
Un lien d'évitement ou d'accès rapide à la zone de contenu principal doit être présent.
En Bref : L'essentiel à retenir
- L'objectif est de permettre aux utilisateurs naviguant au clavier d'accéder directement au contenu principal, en évitant le menu de navigation.
- La solution technique implique un lien masqué, placé en haut du `<body>`, qui devient visible au focus.
- Ce lien, utilisant la classe `.skip-link`, est initialement positionné hors de l'écran par CSS.
- Lorsque le lien reçoit le focus, le CSS le repositionne en haut de la page et le rend visible.
Objectif
Permettre aux utilisateurs naviguant au clavier d'atteindre directement le contenu principal sans avoir à tabuler à travers tout le menu de navigation à chaque page.
Solution Technique
1. Lien masqué (visible au focus)
Placez ce lien tout en haut du <body>. Il peut être masqué visuellement par défaut mais DOIT devenir visible lorsqu'il reçoit le focus.
<body>
<a href="#main-content" class="skip-link">Aller au contenu principal</a>
<!-- ... -->
<main id="main-content">
<!-- Contenu -->
</main>
</body>
2. CSS pour le lien d'évitement
.skip-link {
position: absolute;
top: -9999px;
left: -9999px;
}
.skip-link:focus {
top: 0;
left: 0;
background: #fff;
padding: 10px;
z-index: 1000;
}