Dans chaque ensemble de pages, le menu et les barres de navigation sont-ils toujours à la même place (hors cas particuliers) ?
Un utilisateur de lecteur d’écran parcourt votre site comme dans un couloir familier : il sait où se trouve chaque porte. Si le menu principal est après l’en-tête sur la page d’accueil, mais au-dessus du fil d’Ariane sur les pages intérieures, il doit se réorienter à chaque changement de page. Pour quelqu’un qui navigue au clavier ou aux raccourcis de son lecteur d’écran, c’est une friction réelle, pas un détail.
Le critère 12.2 exige deux conditions simultanées : la position visuelle des menus et barres de navigation doit rester identique d’une page à l’autre dans un même ensemble, et leur ordre dans le DOM (code source généré côté client) doit être constant. Un menu qui reste visuellement en haut à gauche mais qui change d’ordre dans la structure HTML échoue tout de même ce critère.
Ce qui peut varier sans poser de problème : le contenu des liens. Une navigation peut afficher des entrées différentes selon la section du site ou l’état de connexion de l’utilisateur. Position fixe, contenu libre.
La cohérence s’applique à l’intérieur d’un même ensemble de pages, pas à l’échelle d’un nom de domaine entier. Un site institutionnel peut avoir une navigation principale différente pour chaque grande section, du moment que chaque ensemble reste cohérent en interne.
Un test pour s'assurer de la cohérence de la navigation entre les pages
Cohérence de position et d'ordre DOM des menus de navigation
- Sélectionnez une autre page du même ensemble (pas la page d’accueil, pas une étape d’un processus).
- Comparez visuellement les deux pages : le menu principal et les barres de navigation occupent-ils la même position à l’écran ?
- Inspectez le DOM (DevTools, onglet Éléments) des deux pages après rendu côté client : le menu et les barres de navigation apparaissent-ils dans le même ordre relatif dans la structure HTML ?
- Les deux conditions doivent être réunies (position visuelle ET ordre dans le DOM) pour que le test soit validé.
Non applicable si :
- La page fait partie d’un processus (paiement, commande, inscription multi-étapes)
- La page auditée est la page d’accueil
- Le site est constitué d’une seule page
Exemples
❌ Non conforme : Navigation déplacée selon le template de page
<!-- Template page d'accueil : nav AVANT le main -->
<body>
<header>
<nav aria-label="Navigation principale">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/produits">Produits</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="contenu-principal">
<h1>Bienvenue</h1>
</main>
</body>
<!-- Template page intérieure : nav APRÈS le main -->
<body>
<header></header>
<main id="contenu-principal">
<h1>Nos produits</h1>
</main>
<nav aria-label="Navigation principale">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/produits">Produits</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</body>La navigation principale change d’ordre dans le DOM entre les deux templates. Sur la page d’accueil, elle est avant le <main> ; sur les pages intérieures, elle est après. Un utilisateur de lecteur d’écran qui utilise le raccourci « aller au prochain élément de navigation » ne la trouvera pas au même endroit selon la page où il se trouve.
✅ Conforme : Navigation cohérente dans tous les templates
<!-- Template page d'accueil -->
<body>
<header>
<nav aria-label="Navigation principale">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/produits">Produits</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="contenu-principal">
<h1>Bienvenue</h1>
</main>
</body>
<!-- Template page intérieure : même structure, même position -->
<body>
<header>
<nav aria-label="Navigation principale">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/produits">Produits</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="contenu-principal">
<h1>Nos produits</h1>
</main>
</body>La navigation principale occupe la même position visuelle (dans le <header>, en haut) et le même ordre dans le DOM sur les deux templates. Un utilisateur qui a repéré la navigation sur la première page la retrouve exactement au même endroit sur toutes les suivantes.
Astuces et pièges
⚠️ CSS masque le désordre du DOM
Un menu déplacé visuellement via order (Flexbox) ou grid-area (CSS Grid) garde son ordre d’origine dans le DOM. Le menu peut paraître identiquement positionné sur toutes les pages, mais si son rang dans le DOM varie d’un template à l’autre, le critère échoue. Vérifiez toujours le DOM rendu dans les DevTools, pas seulement l’affichage visuel.
⚠️ Toutes les barres de navigation sont concernées
Le critère ne vise pas uniquement le menu principal. Un fil d’Ariane, une navigation secondaire, une barre de raccourcis : tous les éléments de navigation récurrents doivent rester à la même place d’une page à l’autre. Inspectez chaque <nav> présent dans vos templates, pas seulement le premier.
⚠️ Pages de processus : exception explicite
Un tunnel de commande ou de paiement peut légitimement supprimer ou déplacer la navigation principale pour éviter les distractions. Ces pages sont explicitement hors scope pour ce critère. En audit, identifiez en amont quelles pages appartiennent à un processus pour ne pas les inclure dans la comparaison.
💡 Auditer sur le DOM rendu, pas la source brute
La méthodologie précise « code source généré côté client ». Pour un site React, Vue ou Angular, inspectez le DOM dans les DevTools après hydratation complète. Un composant JavaScript peut réorganiser la structure après le chargement initial de la page, rendant la source HTML initiale trompeuse.
Questions fréquentes
Pourquoi les libellés des liens de navigation doivent-ils rester cohérents entre les pages ?
Oui, sans restriction au titre du critère 12.2. Le RGAA n’exige aucune cohérence sur le contenu du menu : les liens peuvent varier d’une section à l’autre ou être mis en avant différemment selon la page courante (élément actif, lien manquant car on est déjà sur la page). Seules la position visuelle et la position dans le DOM sont concernées.
Comment auditer concrètement la cohérence de navigation selon le critère RGAA 12.2 ?
Choisissez deux pages du même ensemble (ex : deux fiches produits, ou deux articles de blog). Ouvrez-les côte à côte. Vérification visuelle : le menu est-il au même endroit sur les deux pages ? Vérification DOM : dans l’inspecteur, comptez la position du <nav> principal parmi ses frères dans le <body> ou dans le <header>. Si elle diffère, le test échoue. Ce critère n’est pas détecté automatiquement : c’est une vérification manuelle.
Quelle cohérence le RGAA 12.2 exige-t-il entre le menu principal et la navigation secondaire ?
Oui. Le critère vise « le menu et les barres de navigation » sans distinction de rang. Un fil d’Ariane ou une navigation contextuelle ne sont pas concernés s’ils changent naturellement selon la page (c’est leur fonction). En revanche, une barre de sous-navigation présente sur toutes les pages d’une section doit rester à la même position dans cette section.
Comment un menu sticky visible pendant le scroll affecte-t-il la conformité RGAA 12.2 ?
Non, un menu en position: fixed ou sticky ne viole pas ce critère tant que sa position dans le DOM reste identique d’une page à l’autre. Le comportement de défilement est indépendant de la cohérence de navigation définie par le critère 12.2.
Comment le responsive design affecte-t-il la conformité au critère RGAA 12.2 sur mobile ?
La vérification doit être faite dans le contexte d’affichage audité. Si vous auditez la version mobile, comparez les pages en vue mobile : la position du menu doit y être cohérente. Si vous auditez la version desktop, comparez en desktop. Un menu hamburger en mobile et un menu horizontal en desktop représentent deux contextes distincts, pas une incohérence.