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.

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 know where to look when searching for the page they wish to find.

Consistent navigation is especially accessible for screen magnifier users because screen magnifiers significantly enlarge everything and the users move around the interface 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).

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, take this awesome website:

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

Assess the navigation of all pages of the website/application (making a collection of screenshots and putting them all up on wall or a virtual collaboration board may be helpful in this case).

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.