Navigation and Skipping Repetitive Navigation

Provide Skip to Main Content Link 

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.

Example:

<a href="#maincontent" class="skip-link visually-hidden 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>

 

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.

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.