WCAG 3.2.3 Consistent Navigation

What it asks

Most sites repeat the same navigation on every page: a header menu, a footer with links, a search box, a set of utility links such as "Sign in" and "Basket". This rule says that when those repeat across a set of pages, the items come in the same relative order each time. A site may leave an item out on some pages, or add one, but the items that do repeat must not swap places.

Relative order is the key phrase. The menu does not have to be in the same position on screen, or the same size, or the same colour. It has to read in the same order. A footer that is taller on one page still passes if its links come in the same sequence. A change the person makes themselves, such as choosing a different layout, is allowed.

The criterion applies to a set of web pages, so it cannot be judged from one page. It is Level AA, and it is closely related to 3.2.4 Consistent Identification, which is about the names of repeated things rather than their order, and to 3.2.6 Consistent Help, which applies the same idea to help.

Its official name is success criterion 3.2.3 Consistent Navigation, at Level AA. It was added in WCAG 2.2, under guideline 3.2 Predictable and the principle Understandable. The W3C’s normative text says, in part:

“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.”

From WCAG 2.2, W3C. Full explanation: Understanding 3.2.3 Consistent Navigation.

Who it helps

People with low vision, who use a magnified view and learn where things are rather than scanning for them. Screen reader users, who learn the order of a menu and jump to the item they want by count or by letter. If the order changes, the shortcut lands on the wrong item.

People with cognitive disabilities and memory difficulties, who rely on things staying where they were. Each page that rearranges the menu asks them to learn the site again.

What passes and what fails

These pass

• A header menu with the same items in the same order on every page, with the current page highlighted.
• A footer whose links come in the same sequence on every page, even though the footer is taller on pages with a newsletter form.
• A sub-menu that appears only in one section of the site, in the same order on every page of that section.
• A menu that drops the "Pricing" item on checkout pages, leaving the remaining items in their usual order.

These fail

• Header menu items that appear in a different order on section landing pages than on the home page.
• "Sign in" and "Basket" in the header on some pages and in the footer on others.
• A footer whose links are ordered one way on marketing pages and another way on product pages, because two templates were built separately.
• A menu whose order differs when someone is signed in, with no action by the person to change it.

How to test it by hand

1. Choose a set of pages across different templates: the home page, a listing, an article, a product, a form and an account page.
2. On each one, write down the order of the items in each repeated navigation mechanism: the main menu, the utility links, the footer links, any sidebar.
3. Compare the lists. Ignore items that are present on one page and absent on another; look only at the order of the items the pages share.
4. Compare pages at the same screen width, since a mobile menu may be ordered differently from a desktop one by design, and that is a separate comparison.
5. Any mechanism whose shared items come in a different order on some pages, without the person having changed it, fails.

What automated testing can decide

What a machine can decide

Given a set of pages, this is a comparison automated testing can make exactly. It can find the navigation each page repeats and check that the items the pages share come in the same order everywhere. Where the order differs, it can name the page that differs and the items that moved.

What it cannot

The comparison is only as good as the set of pages it was given. A handful of pages from one template prove little about a site with ten templates. A tool also cannot see a change the person made, such as a menu they reordered themselves, which the criterion allows. And a page whose navigation is not marked up as navigation is harder for any tool to compare.

How Dreven handles it

Dreven looks at the repeated navigation across the pages in an audit and shows a reviewer the pages where its order differs, side by side. The reviewer decides each result, because a change the visitor made themselves is allowed.

The result covers the set of pages in the audit. Where there are too few pages to compare, the report says so, and an audit of a single page records that consistency across the site was not assessed.

No automated check makes a site conform. In Dreven, a person reviews the results and signs the report.

Related criteria

• 3.2.4 Consistent Identification (Level AA). Repeated controls must also be named the same way on every page.
• 3.2.6 Consistent Help (Level A). The same idea applied to help: contact links and chat in the same place in each page’s order.
• 2.4.5 Multiple Ways (Level AA). There must be more than one way to find a page within a set.
• 2.4.1 Bypass Blocks (Level A). A way to skip the repeated navigation, which is easier to use when the navigation is predictable.

Questions people ask

All WCAG 2.2 criteria, in plain words