Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ?
Quand un utilisateur de NVDA appuie sur la touche D, son lecteur d’écran saute au landmark suivant. S’il n’y en a pas, rien ne se passe. Votre menu, votre contenu principal et votre pied de page deviennent inaccessibles par navigation rapide. Sans landmark, pas de repères.
Ce critère vérifie que les grandes zones de votre page utilisent les balises sémantiques appropriées. L’en-tête de page : <header>. Les zones de navigation principales et secondaires : <nav>. Le contenu central : <main>. Le pied de page : <footer>. Chaque balise a son rôle précis : <nav> n’est pas un conteneur générique pour des listes de liens, c’est une zone de navigation réelle.
Pour auditer, inspectez le DOM rendu (pas le code source) de chaque gabarit de page. Les extensions HeadingsMap ou l’outil Web Developer affichent les landmarks en quelques secondes. Si plusieurs éléments <main> coexistent dans le DOM (cas des SPA ou des interfaces à onglets), un seul doit être visible : les autres portent obligatoirement l’attribut hidden.
Un test pour évaluer la structuration sémantique du document
Landmarks <header>, <nav>, <main>, <footer>
Pour chaque page, inspectez le DOM rendu et vérifiez les six points suivants :
- La zone d’en-tête de page est structurée avec un élément
<header>. - Chaque zone de navigation principale ou secondaire est structurée avec un élément
<nav>. - Aucun élément
<nav>n’est utilisé en dehors des vraies zones de navigation (pas de pagination, de nuages de tags, de listes de catégories). - Le contenu principal est structuré avec un élément
<main>. - S’il existe plusieurs éléments
<main>dans le DOM, un seul est visible ; les autres portent l’attributhidden. - La zone de pied de page est structurée avec un élément
<footer>. Si les six conditions sont réunies pour chaque gabarit de page, le test est validé.
Exemples
❌ Non conforme : Structure basée sur des <div> sans sémantique
<div class="header">
<img src="logo.svg" alt="Entreprise">
<div class="nav">
<a href="/">Accueil</a>
<a href="/services">Services</a>
<a href="/contact">Contact</a>
</div>
</div>
<div class="main-content">
<h1>Bienvenue sur notre site</h1>
<p>Contenu principal de la page.</p>
</div>
<div class="footer">
<p>© 2026 Entreprise</p>
</div>Ces <div> n’ont aucune sémantique pour les technologies d’assistance. Un utilisateur de lecteur d’écran qui liste les landmarks de la page n’obtient rien. Il doit parcourir l’intégralité du contenu, y compris le menu et le pied de page, avant d’atteindre le contenu utile.
✅ Conforme : Structure sémantique complète avec les balises HTML5
<header>
<img src="logo.svg" alt="Entreprise">
<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>
<h1>Bienvenue sur notre site</h1>
<p>Contenu principal de la page.</p>
</main>
<footer>
<p>© 2026 Entreprise</p>
</footer>Chaque zone utilise la balise sémantique appropriée. Un utilisateur de NVDA peut sauter directement au <main> via la touche Q, ou lister tous les landmarks de la page pour s’y déplacer instantanément. La navigation ne nécessite plus de parcourir la page en entier.
Astuces et pièges
⚠️ <nav> utilisé pour des listes qui ne sont pas des navigations
C’est l’erreur la plus fréquente en audit. On trouve des <nav> autour de nuages de tags, de listes de catégories de blog ou de pagination. Le RGAA est explicite : <nav> est réservé aux zones de navigation principales et secondaires. Chaque <nav> supplémentaire apparaît dans la liste des landmarks : multiplier les faux <nav> dégrade directement l’expérience des utilisateurs de lecteurs d’écran.
⚠️ Cacher un <main> avec CSS plutôt qu’avec hidden
Dans une SPA ou une interface à onglets avec plusieurs éléments <main>, masquer les inactifs avec display: none ou visibility: hidden ne suffit pas. Le RGAA exige l’attribut HTML hidden. Un élément hidden est retiré de l’arbre d’accessibilité ; un élément caché par CSS peut rester annoncé par certaines combinaisons navigateur/AT.
⚠️ Composants Angular et React : les balises personnalisées ne sont pas des landmarks
Un composant <app-header> ou <my-nav> n’est pas un landmark HTML, même s’il contient un vrai menu. Pour valider le critère 9.2, la balise sémantique native (<header>, <nav>, <main>, <footer>) doit être présente dans le DOM rendu. Ajoutez-la à l’intérieur du composant, ou utilisez les attributs ARIA de repli : role="banner", role="main", role="navigation", role="contentinfo".
💡 Le <header> d’une <section> n’est pas le <header> de page
Un <header> imbriqué dans une <section>, un <article> ou un <aside> est l’en-tête de cet élément, pas un landmark de page. Seul un <header> non imbriqué dans une section de contenu est exposé comme landmark banner. C’est le même principe pour <footer>. Vérifiez la position dans l’arbre DOM, pas juste la présence de la balise.
Questions fréquentes
Comment remplacer <header>, <main> et <footer> par des rôles ARIA en RGAA ?
Oui, quand les balises natives sont impossibles à poser (composants tiers, contraintes techniques). role="banner" remplace <header>, role="main" remplace <main>, role="contentinfo" remplace <footer>, role="navigation" remplace <nav>. Le RGAA accepte cette équivalence pour le critère 9.2. Cela dit, la balise native reste préférable : elle fonctionne sans JavaScript et réduit le risque d’erreur de mise en œuvre.
Combien de balises <nav> sont autorisées sur une page selon le RGAA ?
Il n’y a pas de limite numérique, mais chaque <nav> doit correspondre à une zone de navigation principale ou secondaire. En pratique : menu principal, menu secondaire (sous-navigation), fil d’Ariane s’il constitue une vraie navigation. Au-delà de deux ou trois <nav>, posez-vous la question de leur légitimité. Chaque <nav> supplémentaire doit porter un aria-label ou aria-labelledby pour que les lecteurs d’écran puissent les distinguer.
Quelle règle RGAA s'applique aux <header> et <footer> imbriqués dans un <article> ?
Non. Le test 9.2.1 porte sur les zones globales de la page : l’en-tête du site, la navigation principale, le contenu principal et le pied de page du site. Les <header> et <footer> imbriqués dans des <article> ou <section> sont valides en HTML5 et peuvent coexister sans problème. Ils ne sont ni exigés ni évalués par ce critère.
Comment vérifier rapidement le critère RGAA 9.2 lors d'un audit d'accessibilité ?
Deux méthodes complémentaires. Première : ouvrez les DevTools, onglet « Inspecteur » (pas « Sources »), cherchez <header>, <nav>, <main>, <footer> dans le DOM rendu. Deuxième : utilisez l’extension Landmark Navigation ou naviguez avec NVDA (touche D). Si aucun landmark n’est exposé, le critère échoue immédiatement, quel que soit l’aspect visuel de la page.