Skip to main content

Ensure Consistent Navigation Order Across Pages

WCAG 2.1 Ultimate Guide
Disabilities Affected: Cognitive, Mobility, Visual
Success Criterion: 3.2.3
Level: AA
WCAG Link
Navigational mechanisms that are repeated on multiple web pages within a set (website) must occur in the same relative order each time they are repeated, unless a change is initiated by the user.

Why It Matters

Consistency in navigation placement and order helps users learn how to use a website quickly. Users with cognitive disabilities rely on predictability. Screen reader users and keyboard users benefit from knowing where navigation links will appear on each page, allowing them to navigate more efficiently without having to reorient themselves constantly.

Fixing the Issue

Identify blocks of navigation (like main menus, breadcrumbs, footer links) that appear on multiple pages. Ensure these blocks appear in the same place and the links within them are in the same order across all pages where they are present. Use templates or include files for repeated navigation blocks to maintain consistency easily.

Good Code Example

Using consistent header and footer navigation across pages:

  • <body>
  <header>
    <nav> <a href="/">Home</a> | <a href="/about">About</a> | <a href="/contact">Contact</a> </nav>
  </header>
  <main>...</main>
  <footer> <a href="/privacy">Privacy Policy</a> | <a href="/terms">Terms</a> </footer>
<body>
  <header>
    <nav> <a href="/">Home</a> | <a href="/about">About</a> | <a href="/contact">Contact</a> </nav>
  </header>
  <main>...</main>
  <footer>
    <a href="/privacy">Privacy Policy</a> | <a href="/terms">Terms</a>
  </footer>
</body></body>

Bad Code Example

Navigation links change order on different pages:

  • <body>
  <header>
    <nav> <a href="/">Home</a> | <a href="/products">Products</a> | <a href="/support">Support</a> </nav>
  </header>
  ...
<body>
  <header>
    <nav> <a href="/">Home</a> | <a href="/support">Support</a> | <a href="/products">Products</a> </nav>
  </header>
  ...
</body></body>
Search Ultimate Guide
Tablet displaying an eBook cover titled 'Integrating Accessibility Compliance Into Your Budget' by AccessiTREE. The cover features a digital tree with accessibility-related icons, symbolizing inclusive design and compliance.
Free eBook
Integrating Accessibility Compliance Into Your Budget
A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling
Learn More
Need Help with Compliance?
Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.
Schedule Consult