Loading...
Loading content...
Loading content...
Keep navigation consistent across pages.
Why it matters: Consistent navigation helps users learn and predict how to move around the site.
Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
What This Means: This success criterion requires that navigation elements (menus, links, buttons) that appear on multiple pages within a website appear in the same relative order and location each time they are repeated. This makes the site predictable and easier to navigate.
Why It's Important: Consistent navigation helps users learn the site structure and navigate more efficiently. Users with cognitive disabilities, blind users using screen readers, and all users benefit from predictable navigation. When navigation changes between pages, users must relearn the layout on every page, increasing cognitive load and making navigation difficult.
Use consistent navigation components across all pages. Keep navigation items in the same order (e.g., Home, About, Services, Contact). Keep navigation in the same location (top, side, bottom). Use the same navigation structure and styling. Only change navigation when users explicitly request it (e.g., through a settings option).
This criterion ensures that users with cognitive disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that blind users can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Navigation items appear in different orders on different pages, confusing users.
<!-- Page 1 -->
<nav><a href="/">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a></nav>
<!-- Page 2 -->
<nav><a href="/contact">Contact</a> <a href="/">Home</a> <a href="/about">About</a></nav>Navigation items always appear in the same order across all pages.
<!-- All pages -->
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 3.2.3 Consistent Navigation are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
I can rearrange navigation on different page types (home vs. content pages).
Navigation should be consistent across all pages. Users learn the navigation structure and expect it to remain the same.
Navigation can change if I keep it in the same general area.
Both order and location must be consistent. Changing either breaks user expectations and makes navigation unpredictable.
Navigation items in different orders on different pages.
Use the same navigation component on all pages. Keep navigation order consistent throughout the site.
Navigation that moves to different locations on different pages.
Keep navigation in the same location (top, side, bottom) on all pages. Use consistent layout templates.
Navigation structure that changes based on page type.
Maintain consistent navigation structure across all pages. Don't change navigation based on page content or type.
Note: These are official W3C resources for 3.2.3. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 3.2.3 Consistent Navigation correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Understandable PrincipleGuideline
3.2 Predictable