Exampel of navigation that looks the same (accessible) vs. different (inaccessible)
Image description: Accessible and inaccessible comparison of navigation consistency. The accessible example shows 2 webpages where the navigation looks the same and is presented in the same order. The navigation items are, “Trees, Bees, Knees.” In the inaccessible example, the navigation looks different as it’s horizontal on one page and vertical on the other.

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Consistent navigation prevents people from getting lost or confused, especially for screen reader users, screen magnifier users, and people with cognitive disabilities.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.

Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.

Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.

In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.

In order to be accessible, the navigation should have the same visual styling, wording, and be written in the same order. This way, it's more predictable and makes it easier for people to find what they're looking for.

Consistent navigation is especially accessible for screen magnifier users because screen magnifiers significantly enlarge everything on screen. Screen magnifier users often move around the screen to find things. Consistency helps them find things more quickly and easily because it’s more predictable.

This references WCAG criterion 3.2.3 Consistent Navigation (Level AA).

Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.

How to Implement This

Use Global Navigation

There are a few different types of navigation in UX design (user experience). The global navigation describes the top level of navigation that should appear on all pages. Secondary navigation and even deeper levels nested within the global nav might change depending on where you are in the application.

For example:

An information architecture map with global nav at the top and secondary nav below (which shows pages within the top sections).
Image description: A site map titled, “My Awesome Website.” The highlighted global nav section shows 3 main pages: “Animals, Plants, Aliens.” Below is a larger section labeled secondary nav. Under Animals are “Birds, Cats, Sharks.” Under Plants are “Veggies, Flowers.” Under Aliens are “Vulcans, Romulans, Martians.”


Website where the page "Sharks" is selected within the "Animals" tab.
Image description: A website titled, “Awesome” with tabs at the top that say, “Animals, Plants, Aliens.” We are on the “Animals” tab, which displays a secondary menu on the side that says, “Birds, Cats, and Sharks.” We are on the “Sharks” page, which displays a shark emoji.


The global navigation should remain the same and appear on all pages. This helps people move from one section of the site to an entirely different section quickly and easily.

The secondary menu’s content will be different depending on where you are, but the visual styles and placement should remain the same. It would be confusing if it changed colors, placement, etc., leaving people guessing.

Sometimes, websites include a separate merchandise store but disguise the urls to make it appear all under the same website. However, the store website has entirely different navigation. Don’t do this - instead, make it clear that you are leaving and going to a different website.

Interesting Further Reading

How to Test This

Manual Test
Semi-Automated Test
Automated Test
  • Create a visual inventory of all the pages with special focus on the navigation.
  • Make note of any inconsistencies in the appearance and order of items.

Credits

No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.