Navigation that changes location or order between pages violates users' mental model of the site, forcing screen reader users and keyboard navigators to re-learn the layout on every page. WCAG 2.2 SC 3.2.3 (Consistent Navigation) is a Level AA requirement. Users with cognitive disabilities are disproportionately affected — unpredictable navigation increases error rates and abandonment. For any product requiring repeat visits, inconsistent navigation erodes trust.
High because navigation inconsistency forces users with cognitive or motor disabilities to relearn the interface on every page, violating WCAG 2.2 SC 3.2.3 at Level AA and undermining core usability.
Render your navigation from a single shared component in the root layout so it cannot diverge between pages.
// app/layout.tsx — navigation is defined once, appears everywhere
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<SiteHeader /> {/* Single source of truth for nav */}
<main>{children}</main>
<SiteFooter />
</body>
</html>
)
}
If some pages need additional navigation (e.g., a docs sidebar), add it as a supplemental landmark, never in place of the primary nav. Audit every distinct layout file to confirm the primary nav component and its link order are identical.
ID: accessibility-wcag.operable.consistent-navigation
Severity: high
What to look for: Enumerate every relevant item. Review the navigation component across multiple pages. Check that the same navigation appears in the same location (e.g., top-left, horizontal menu) on every page with consistent structure and link order.
Pass criteria: At least 1 of the following conditions is met. Navigation component appears in the same location and order across all pages. The structure is consistent.
Fail criteria: Navigation appears in different locations on different pages, or the structure changes between pages.
Skip (N/A) when: The site has only one page.
Detail on fail: Example: "Header navigation on home page shows [Home, About, Pricing]. On /about, navigation shows [About, Pricing, Home] in different order. Sidebar appears on some pages but not others"
Remediation: Create a consistent layout with shared navigation:
// app/layout.tsx
export default function Layout({ children }) {
return (
<>
<Navigation /> {/* Always in the same place */}
<main>{children}</main>
</>
)
}