Votre site propose-t-il un lien « Aller au contenu » visible au clavier pour sauter directement à la zone de contenu principal ?
Critère officiel 12.7 — 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) ?
Pourquoi c'est important
Sans lien d'évitement, un utilisateur naviguant au clavier doit parcourir tous les liens du menu principal à chaque nouvelle page pour atteindre le contenu. Sur un site avec un menu de 15 liens, c'est 15 appuis sur Tab avant le premier mot de l'article — à chaque page visitée.
Exemples concrets
Ce qui est conforme
En appuyant sur Tab dès l'ouverture de n'importe quelle page, le premier élément focalisé est un lien « Aller au contenu principal » qui devient visible. En appuyant sur Entrée, le focus saute directement au contenu — le menu est entièrement contourné.
Ce qui pose problème
En appuyant sur Tab depuis la page d'accueil, le focus passe successivement sur le logo, les 14 liens du menu, les 5 liens de navigation secondaire, puis enfin le titre du premier article. L'utilisateur au clavier appuie 20 fois sur Tab avant d'atteindre le contenu.
Comment agir
Test autonome : ouvrez n'importe quelle page de votre site et appuyez immédiatement sur Tab. Si le premier élément visible n'est pas un lien « Aller au contenu » (ou équivalent), demandez à votre prestataire de l'ajouter. Ce lien peut rester invisible tant que le focus n'est pas dessus — c'est normal et acceptable.
Règles clés
- Le lien d'évitement doit être le premier élément focusable de la page — dans le <head> du contenu ou en premier dans le <body>.
- Il doit être accessible au clavier : clip masking, jamais display:none.
- Il doit apparaître visuellement au focus — styles :focus explicites.
- Sa cible (<main id='contenu-principal'>) doit recevoir le focus programmatique : ajouter tabindex='-1'.
- Le texte doit décrire la destination : 'Aller au contenu principal', 'Accéder au contenu', pas simplement 'Skip'.
- Le lien doit être présent sur toutes les pages, pas uniquement la page d'accueil.
Erreurs fréquentes
- Lien d'évitement présent dans le HTML mais display:none — non focusable, donc inutile
- Lien d'évitement présent et focusable mais ne pointant pas vers une ancre existante dans la page
- Ancre cible présente mais sans tabindex='-1' — le scroll fonctionne mais le focus ne se déplace pas
- Lien d'évitement placé après la navigation dans le DOM — arrive trop tard dans l'ordre de tabulation
- Lien d'évitement présent uniquement sur la page d'accueil et absent des pages intérieures
- Texte du lien d'évitement ambigu ('Skip') sans précision sur la destination
Exemples de code
skip link display:none — inutile
✗ Non conforme<a href="#main" style="display:none">Aller au contenu</a>
<header><!-- navigation --></header>
<main id="main"><!-- contenu --></main>display:none retire le lien de l'ordre de tabulation. Il ne peut jamais recevoir le focus — le skip link est totalement inutile.
skip link correct avec clip masking
✓ Conforme<!-- En premier dans le <body> -->
<a href="#contenu-principal" class="skip-link">
Aller au contenu principal
</a>
<header><!-- navigation --></header>
<main id="contenu-principal" tabindex="-1">
<h1>Titre de la page</h1>
</main>
<style>
.skip-link {
/* Masqué visuellement mais focusable */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
/* Visible au focus clavier */
position: fixed;
top: 0;
left: 0;
width: auto;
height: auto;
padding: 0.75rem 1.5rem;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
background: #1a1a6e;
color: #ffffff;
font-weight: bold;
font-size: 1rem;
z-index: 10000;
outline: 3px solid #ffffff;
outline-offset: 2px;
}
</style>Le lien est masqué par clip masking — focusable mais invisible. Il devient visible (position:fixed en haut de page) dès qu'il reçoit le focus. tabindex='-1' sur le <main> permet au focus de se déplacer sur l'élément à l'activation du lien.
skip link visible en permanence
✓ Conforme<!-- Alternative : skip link toujours visible -->
<a href="#contenu-principal"
class="skip-link-visible">
Aller au contenu principal
</a>
<style>
.skip-link-visible {
display: block;
padding: 0.5rem 1rem;
background: #1a1a6e;
color: #ffffff;
text-align: center;
/* Focus visible obligatoire */
}
.skip-link-visible:focus {
outline: 3px solid #ffffff;
outline-offset: 2px;
}
</style>Un skip link toujours visible est encore meilleur — il bénéficie aussi aux utilisateurs voyants qui naviguent au clavier et ne savent pas que la touche Tab est une option. Moins esthétique mais plus accessible.
Référence WCAG : 2.4.1, 2.4.3, 3.2.3