Navigation and Skipping Repetitive Navigation
- Christina Lutz-Hatfield
Table of Contents
Overview
Provide ways to help users navigate, find content, and determine where they are.
Help users find the content they need and allow them to keep track of their location.
These tasks are often more difficult for people with disabilities.
For finding, navigation, and orientation, it is important that the user can find out what the current location is. For navigation, information about the possible destinations needs to be available.
Screen readers convert content to synthetic speech which, because it is audio, must be presented in linear order.
Ensure that screen reader users can successfully navigate the content.
Allow users to more easily recognize navigation bars and page headers and to bypass this repeated content.
Navigation has two main functions:
to tell the user where they are
to enable the user to go somewhere else
Allow Users to Bypass Repetitive Navigation
Provide screen reader and keyboard only users with the ability to skip repetitive navigation menu links and go straight to the main content area.
Make sure a “skip to main content” link has been incorporated to all site pages.
The link also needs to be visible for sighted keyboard only users.
The link should be placed at the very top of the page and link to the beginning of the main content area.
Visual Example
Code Example
<a href="#maincontent" class="skip-link visually-hidden-focusable">Skip to main content</a>
<main id="maincontent" role="main">
<h1> Page title</h1>
<p>This is the beginning of the main content area</p>
</main>How It Works
When the web page has loaded press the TAB key a few times.
The “Skip to main content” or “Skip to content” link is the first link that should appear at the top of every web page.
The "Skip to main content" link is by default hidden and only becomes visible to a sighted user when pressing the TAB key.
When the “Skip to main content” link receives keyboard focus, press the Enter key to activate the link. You should now be redirected to the main content area of the page.
If the keyboard test is successful, screen reader users will also be able to access “skip to main content” link.
Provide Sequential Navigation
Ensure that when users navigate sequentially through content, they encounter information in an order that is consistent with the meaning of the content and can be operated from the keyboard.
This reduces confusion by letting users form a consistent mental model of the content.
For example, a screen reader user interacts with the programmatically determined reading order, while a sighted keyboard user interacts with the visual presentation of the Web page.
Make sure that the focus order makes sense to both of these users and does not appear to either of them to jump around randomly.
Create a logical tab order, for screen reader and sighted keyboard only users, through navigation menus, forms and data tables.
Please see more detailed information on how to comply with this guideline.
Provide Consistent Navigation
Ensure that any type of navigation that is repeated across multiple web pages occur in the same relative order each time they are repeated.
Ensuring that repeated components occur in the same order on each page of a site helps users become comfortable that they will able to predict where they can find things on each page.
This helps users with cognitive limitations, users with low vision, users with intellectual disabilities, and also those who are blind.
Individuals with low vision who use screen magnification to display a small portion of the screen at a time often use visual cues and page boundaries to quickly locate repeated content.
Presenting repeated content in the same order is also important for visual users who use spatial memory or visual cues within the design to locate repeated content.
Please see more detailed information on how to comply with this standard.
Provide Consistent Identification
Identify repeating functions consistently.
Consistently identified actions are especially important to people with disabilities.
Components that have the same functionality within a set of web pages should be identified consistently.
Screen reader users rely heavily on their familiarity with functions that may appear on different web pages.
If identical functions have different labels on different web pages, the site will be considerably more difficult to use. It may also be confusing and increase the cognitive load for people with cognitive limitations.
This consistency extends to the text alternatives. If icons or other non-text items have the same functionality, then their text alternatives should be consistent as well.
If there are two components on a web page that both have the same functionality as a component on another page in a set of web pages, then all 3 must be consistent. Hence the two on the same page will be consistent.
Please see more detailed information on how to comply with this guideline.
Provide Navigation in Multiple Ways
Users should be able to get to content in multiple ways.
Provide at least two options for reaching the same content.
Not everyone can navigate content in the same way.
Providing an opportunity to navigate sites in more than one manner can help people find information faster. Users with visual impairments may find it easier to navigate to the correct part of the site by using a search, rather than scrolling through a large navigation bar using a screen magnifier or screen reader. A person with cognitive disabilities may prefer a table of contents or site map that provides an overview of the site rather than reading and traversing through several Web pages. Some users may prefer to explore the site in a sequential manner, moving from Web page to Web page in order to best understand the concepts and layout.
Individuals with cognitive limitations may find it easier to use search features than to use a hierarchical navigation scheme that may be difficult to understand.
Please see more detailed information on how to comply with this guideline.
WCAG Related Guidelines
2.4.5 Multiple Ways (Level AA)
3.2.3 Consistent Navigation (Level AA)
3.2.4 Consistent Identification (Level AA)