La structure générale de votre site — en-tête, navigation, contenu, pied de page — est-elle correctement déclarée pour les logiciels de lecture ?
Critère officiel 9.2 — Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Pourquoi c'est important
Un logiciel de lecture peut lister les grandes zones d'une page et y accéder directement : « Aller à la navigation principale », « Aller au contenu ». Sans ces zones déclarées techniquement dans le thème, l'utilisateur doit parcourir tout le menu de navigation depuis le début à chaque nouvelle page chargée.
Exemples concrets
Ce qui est conforme
Le site dispose d'une zone d'en-tête, d'une zone de navigation principale, d'une zone de contenu distincte pour chaque page, et d'un pied de page. Le logiciel de lecture propose une navigation par zones. L'utilisateur saute directement au contenu depuis n'importe quelle page.
Ce qui pose problème
Tout le contenu du site est imbriqué dans une seule zone générique. Le logiciel de lecture ne distingue pas le menu du contenu. À chaque page, l'utilisateur doit ré-écouter les 12 liens du menu avant d'atteindre le texte qu'il cherche.
Comment agir
Cette structure est configurée par votre prestataire dans le thème WordPress. Demandez-lui de vérifier ce point précis : « Notre thème utilise-t-il les balises structurelles HTML5 (header, nav, main, footer) de façon correcte et unique sur chaque page ? » C'est une vérification rapide lors d'un audit technique.
Règles clés
- Utiliser les éléments HTML natifs en priorité — ils exposent automatiquement le bon landmark : <header> (banner), <nav> (navigation), <main> (main), <footer> (contentinfo), <aside> (complementary), <form> avec aria-label (form), <section> avec aria-label (region).
- Un seul <main> par page.
- Un seul <header> et un seul <footer> en tant que landmarks (enfants directs de <body>).
- Si plusieurs <nav> coexistent : chacun doit avoir un aria-label distinct pour les différencier ('Navigation principale', 'Navigation secondaire', 'Fil d'Ariane').
- Le moteur de recherche peut être balisé avec <search> (HTML5.3) ou <form role="search">.
Erreurs fréquentes
- Page construite entièrement avec des <div> sans aucun élément sémantique ni rôle ARIA
- <header> utilisé à l'intérieur de <article> ou <section> — il n'est landmark que s'il est enfant direct de <body>
- Plusieurs <main> sur la page (un seul est autorisé)
- <nav> sans aria-label quand plusieurs <nav> coexistent sur la même page
- <footer> utilisé à l'intérieur d'un <article> — le landmark contentinfo n'est actif que pour le <footer> enfant de <body>
- role="main" sur un <div> alors qu'un <main> natif serait disponible
Exemples de code
page sans landmarks
✗ Non conforme<div id="header">
<div id="logo">...</div>
<div id="nav">...</div>
</div>
<div id="content">
<div id="main">...</div>
<div id="sidebar">...</div>
</div>
<div id="footer">...</div>Des <div> avec des id descriptifs n'exposent aucun landmark aux technologies d'assistance. L'utilisateur ne peut pas naviguer par points de repère.
page avec landmarks sémantiques
✓ Conforme<header>
<a href="/"><img src="logo.png" alt="Accueil — Nom du site"></a>
<nav aria-label="Navigation principale">
<ul>...</ul>
</nav>
<form role="search" aria-label="Recherche sur le site">
<label for="q">Rechercher</label>
<input type="search" id="q" name="q">
<button type="submit">Rechercher</button>
</form>
</header>
<main id="main-content">
<h1>Titre de la page</h1>
...
</main>
<aside aria-label="Articles récents">
...
</aside>
<footer>
<nav aria-label="Navigation secondaire">...</nav>
</footer>Chaque zone principale est identifiée par un élément sémantique. Les deux <nav> ont des aria-label distincts. Le <form> de recherche a role="search". L'utilisateur peut naviguer directement à n'importe quelle zone.
multiples nav sans aria-label
✗ Non conforme<header>
<nav><!-- Navigation principale --></nav>
</header>
<main>
<nav><!-- Fil d'Ariane --></nav>
<article>...</article>
<nav><!-- Pagination --></nav>
</main>
<footer>
<nav><!-- Navigation footer --></nav>
</footer>Quatre éléments <nav> sans aria-label. Dans la liste des landmarks, l'utilisateur voit quatre 'navigation' identiques — impossible de distinguer la navigation principale du fil d'Ariane ou de la pagination.
multiples nav avec aria-label distincts
✓ Conforme<header>
<nav aria-label="Navigation principale">...</nav>
</header>
<main>
<nav aria-label="Fil d'Ariane">...</nav>
<article>...</article>
<nav aria-label="Pagination">...</nav>
</main>
<footer>
<nav aria-label="Navigation pied de page">...</nav>
</footer>Chaque <nav> est identifié par un aria-label unique et descriptif. Dans la liste des landmarks, l'utilisateur voit : 'Navigation principale', 'Fil d'Ariane', 'Pagination', 'Navigation pied de page'.
Référence WCAG : 1.3.1