Les grandes zones de votre site — navigation, contenu, pied de page — peuvent-elles être atteintes directement ou contournées par les logiciels de lecture ?
Critère officiel 12.6 — Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ?
Pourquoi c'est important
Un utilisateur de lecteur d'écran doit pouvoir sauter directement au contenu d'une page sans parcourir tout l'en-tête et toute la navigation — à chaque page consultée. Sans repères de zones reconnus, il écoute les mêmes 12 liens du menu à chaque navigation.
Exemples concrets
Ce qui est conforme
Le site utilise les zones structurelles reconnues par les lecteurs d'écran : en-tête, navigation principale, contenu principal, pied de page. L'utilisateur peut sauter directement au contenu depuis n'importe quelle page — les menus répétés sont contournables.
Ce qui pose problème
Tout le contenu du site est dans une seule zone générique. Un utilisateur de lecteur d'écran doit écouter les 12 liens du menu principal à chaque page avant d'atteindre le contenu — même la dixième fois qu'il visite le site.
Comment agir
Cette structuration est mise en place par votre prestataire dans le thème WordPress. Demandez-lui de vérifier que les zones principales utilisent les repères structurels appropriés. Ce critère est directement lié au 9.2 (structure du document) — ils partagent les mêmes solutions techniques.
Règles clés
- Chaque zone principale doit être dans un landmark : <header> (banner), <nav> (navigation), <main> (main), <footer> (contentinfo), <form role='search'> ou <search> (search).
- Si plusieurs zones du même type : chacune doit avoir un aria-label distinct.
- Un lien d'évitement vers le contenu principal (#main-content) doit être le premier élément focusable de la page.
- La cible du lien d'évitement (<main id='main-content'>) doit être focusable — ajouter tabindex='-1' si <main> n'est pas focusable nativement.
- Ce critère est complémentaire de 9.2 (structure cohérente) et 12.7 (lien d'évitement).
Erreurs fréquentes
- Zones principales construites avec des <div> sans landmarks — non contournables
- Landmarks présents mais sans aria-label quand plusieurs zones identiques coexistent
- Lien d'évitement présent dans le HTML mais ne fonctionnant pas (ancre incorrecte, display:none)
- Zone de contenu principal sans id pour servir de cible au lien d'évitement
- Moteur de recherche sans role='search' ou landmark équivalent
Exemples de code
zones non identifiées et non contournables
✗ Non conforme<div id="header">
<div id="logo">...</div>
<div id="main-nav"><!-- 12 liens de navigation --></div>
</div>
<div id="content">
<div id="main"><!-- contenu principal --></div>
<div id="sidebar">...</div>
</div>
<div id="footer">...</div>Aucun landmark, aucun lien d'évitement. L'utilisateur de lecteur d'écran ne peut pas sauter à la zone de contenu principal — il doit traverser les 12 liens de navigation à chaque page.
zones avec landmarks et lien d'évitement
✓ Conforme<!-- Lien d'évitement : premier élément focusable -->
<a href="#contenu-principal"
class="skip-link sr-only-focusable">
Aller au contenu principal
</a>
<header>
<a href="/">
<img src="logo.svg" alt="Accueil — Nom du site">
</a>
<nav aria-label="Navigation principale">
<!-- 12 liens -->
</nav>
<form role="search" aria-label="Recherche">
<label for="q">Rechercher</label>
<input type="search" id="q">
<button type="submit">Rechercher</button>
</form>
</header>
<main id="contenu-principal" tabindex="-1">
<h1>Titre de la page</h1>
<!-- contenu -->
</main>
<aside aria-label="Informations complémentaires">
...
</aside>
<footer>
<nav aria-label="Navigation pied de page">...</nav>
</footer>Tous les landmarks sont en place. Le lien d'évitement pointe vers #contenu-principal. tabindex='-1' sur le <main> le rend focusable programmatiquement sans le mettre dans l'ordre de tabulation.
Référence WCAG : 1.3.1, 2.4.1, 4.1.2