WCAG (Level AA) SC 3.2.3 Consistent Navigation (w3.org)
Issue description
WCAG 3.2.3, “Consistent Navigation” aims to make website navigation predictable and understandable for all users, especially those with cognitive disabilities who may rely on consistent patterns and structures to navigate effectively.
Many websites have inconsistent navigation mechanisms. This can include:
- Changing navigation menus: The structure or labeling of navigation menus changes across different pages or sections of the website.
- Inconsistent link behavior: Links with the same text lead to different destinations depending on the context.
- Unexpected navigation changes: User actions trigger unexpected navigation changes, such as opening new windows or changing the current page without warning.
Why consistent navigation matters
- Predictability: Users should be able to predict how navigation mechanisms will behave across the website. Inconsistent navigation can be confusing and disorienting, especially for users with cognitive disabilities.
- Learnability: Consistent navigation helps users learn how to navigate the website efficiently. Once they understand the navigation structure on one page, they should be able to apply that knowledge to other pages.
- Efficiency: Consistent navigation allows users to find the information they need quickly and easily.
- Accessibility: Consistent navigation is particularly important for users of assistive technologies, who rely on predictable patterns and structures to navigate effectively.
WCAG requirements
This guideline requires that 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. This means:
- Consistent menus: The structure and labeling of navigation menus should remain consistent across all pages.
- Predictable link behavior: Links with the same text should lead to the same destination throughout the website.
- Clear navigation changes: If a user action will cause a change in navigation (e.g., opening a new window), the user should be informed beforehand.
Essentially, this guideline promotes a more user-friendly and predictable navigation experience by ensuring consistency across the website. This benefits all users, especially those with cognitive disabilities who rely on consistent patterns and structures to navigate effectively.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 3.2.1 On Focus
- WCAG (Level A) SC 3.2.2 On Input
- WCAG (Level AA) SC 3.2.4 Consistent Identification
- WCAG (Level AAA) SC 3.2.5 Change on Request
- WCAG 2.2 (A) SC 3.2.6 Consistent Help
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 3.2.3, “Consistent Navigation” involves ensuring that navigation mechanisms are consistent and predictable across your website. Here’s how:
Consistent navigation menus
- Structure: Maintain the same structure for your navigation menus across all pages. This includes the order of menu items, the grouping of items, and the overall hierarchy.
- Labeling: Use consistent labels for menu items. Avoid using different labels for the same page or section in different parts of the website.
- Visual presentation: Use consistent styling for navigation menus across all pages, including colors, fonts, and spacing.
Predictable link behavior
- Consistent destinations: Ensure that links with the same text lead to the same destination throughout the website. Avoid using the same link text for different pages or actions.
- Clear link purpose: Make sure the purpose of each link is clear from its text and context.
Inform users about navigation changes
- New windows: If a link opens a new window or tab, inform the user beforehand. You can do this by using the
target="_blank"attribute withrel="noopener"for accessibility and security. External links should have a visual identification (such as using an icon with accessible text for screen readers) and atitleattribute telling a user what will happen (such as “external link, opens new window/tab”). - Page changes: If a user action will cause a significant change in the current page’s content or layout, provide a warning or confirmation message before the change occurs.
Testing
- Navigation consistency: Review the navigation menus and links across different pages of your website to ensure consistency.
- Assistive technology testing: Test the website with screen readers to ensure that the navigation is predictable and understandable for users who rely on assistive technologies.
- User testing: Conduct user testing with people with cognitive disabilities to get feedback on the clarity and consistency of the navigation.
Examples
- Consistent menu structure: If your main navigation menu has sections for “Home,” “About,” “Products,” and “Contact” on the homepage, maintain that same order and labeling on all other pages.
- Predictable link behavior: If a link labeled “Contact Us” leads to the contact page on one page, ensure it leads to the same contact page on all other pages.
- New window warning: For a link that opens a PDF document in a new window, add the text “(opens in a new window)” next to the link.
By implementing these techniques, you can create a consistent and predictable navigation experience that is easy for all users to understand and use, regardless of their cognitive abilities or assistive technology use.
