In each set of pages, are the menu and navigation bars always in the same place (except in special cases)?
A screen reader user often navigates between pages of a site by memorizing the position of repeated elements: the main menu is always at the top, secondary navigation always on the left. If these landmarks move from one page to another, each page load becomes an uncertain exploration. Criterion 12.2 establishes a simple rule: within a set of pages, menus and navigation bars remain in the same place, both visually and in the code.
Two dimensions are verified in parallel. Visual position first: the main menu must appear in the same location in the layout on all pages of the set. DOM order second: in the client-side generated source code, the menu must be in the same relative position compared to other repeated blocks. A menu that is visually stable but repositioned in the DOM can disrupt keyboard or heading navigation.
The criterion applies to each set of pages, not to an entire domain. A site with a blog section and a shop section can have two different navigations — as long as each section remains consistent internally. It is not the global navigation that counts, but local consistency.
Same result, same place. That's all.
Un test to ensure consistency of navigation across pages
Consistency of position and DOM order of navigation menus
- Identify another page belonging to the same set as the audited page (same section, same template).
- Visually compare the two pages: do the main menu and navigation bars occupy the same location in the layout?
- Open the browser inspector on each page and locate the menu position in the DOM: does it always appear in the same relative order compared to other repeated blocks (header, skip links, main content)?
- If visual position is consistent AND the order in the DOM is identical, the test passes.
Non-applicability conditions (the criterion does not apply):
- The page is part of a linear process (payment tunnel, multi-step form);
- The page is the site's home page;
- The site contains only a single page.
Examples
❌ Non-compliant : Menu repositioned according to page type
<!-- Product page: menu BEFORE content -->
<body>
<header>
<a href="#content" class="skip-link">Skip to content</a>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="content">...</main>
</body>
<!-- Blog article page: menu AFTER content -->
<body>
<header>
<a href="#content" class="skip-link">Skip to content</a>
</header>
<main id="content">...</main>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</body>The main menu changes position in the DOM depending on page type: before content on product pages, after content on blog pages. A user navigating by keyboard or screen reader will have to relocate the menu with each section change, which breaks their navigation landmarks.
✅ Compliant : Menu always in the same place in the DOM and visually
<!-- Product page -->
<body>
<a href="#content" class="skip-link">Skip to content</a>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="content">...</main>
<footer>...</footer>
</body>
<!-- Blog article page (same structure) -->
<body>
<a href="#content" class="skip-link">Skip to content</a>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="content">...</main>
<footer>...</footer>
</body>The main menu occupies the same position in the DOM (after the skip link, in the header, before the main) on all pages. Visually, it is always at the top of the page. Links may vary depending on the section — that is allowed — but the structure and location remain identical. The user finds their landmarks effortlessly.
Tips and pitfalls
⚠️ Confusing content consistency with position consistency
Criterion 12.2 concerns only position and DOM order, not the links present in the menu. A menu that displays "Home, Products, Contact" on some pages and "Home, Blog, Subscribe" on others poses no problem under this criterion — as long as it always appears in the same place. This is the most common interpretation error in auditing.
⚠️ The home page is out of scope
The home page is often built on a radically different template: full-width hero, simplified or repositioned navigation. RGAA explicitly accepts this: the home page is not subject to consistency verification. Similarly for conversion tunnels (payment, step-by-step registration) where navigation is intentionally reduced or absent.
⚠️ Single-page site: criterion does not apply
A site that contains only a single URL (SPA application without real page navigation, or single-page promotional site) is exempt. There is no "set of pages" to compare. The criterion applies once there are multiple distinct pages belonging to the same set.
💡 Each set of pages can have its own navigation
A domain hosting an institutional site and an online shop can have two distinct navigations with different positions in each section. What matters is that navigation remains consistent within each set. During an audit, define your page sets in advance to avoid comparing pages belonging to different templates.
⚠️ CSS order vs actual DOM order
A menu may appear visually consistent thanks to CSS (order, position: fixed, flexbox) while changing position in the HTML code across pages. The test requires checking DOM order, not display order. Two pages that display the menu at the top may have it in first and last position respectively in the source: this is a failure.
⚠️ Navigation modified at user initiative
If a user has customized the interface (widget reorganization, tablet mode manually activated), a position change resulting from that action is not a failure. The criterion targets variations imposed by the site, not adaptations chosen by the user.
Frequently asked questions
Why must navigation link labels remain consistent across pages?
Yes, with no restrictions under criterion 12.2. RGAA requires no consistency on menu content: links may vary from one section to another or be highlighted differently depending on the current page (active element, missing link because we are already on that page). Only visual position and DOM position are concerned.
How do you concretely audit navigation consistency according to RGAA criterion 12.2?
Choose two pages from the same set (e.g., two product sheets, or two blog articles). Open them side by side. Visual verification: is the menu in the same place on both pages? DOM verification: in the inspector, count the position of the <nav> main element among its siblings in the <body> or in the <header>. If it differs, the test fails. This criterion is not detected automatically: it is a manual verification.
What consistency does RGAA 12.2 require between the main menu and secondary navigation?
Yes. The criterion targets "the menu and navigation bars" without distinction of rank. A breadcrumb or contextual navigation are not concerned if they naturally change depending on the page (that is their function). However, a sub-navigation bar present on all pages of a section must remain in the same position within that section.
How does a sticky menu visible during scroll affect RGAA 12.2 compliance?
No, a menu in position: fixed or sticky does not violate this criterion as long as its position in the DOM remains identical from one page to another. Scroll behavior is independent of the navigation consistency defined by criterion 12.2.
How does responsive design affect compliance with RGAA criterion 12.2 on mobile?
The verification must be done in the audited display context. If you audit the mobile version, compare pages in mobile view: the menu position must be consistent there. If you audit the desktop version, compare in desktop. A hamburger menu on mobile and a horizontal menu on desktop represent two distinct contexts, not an inconsistency.