Understandable · 3.2 Predictable

Consistent Navigation WCAG 3.2.3 · Level AA

Navigation mechanisms repeated on multiple pages within a set must appear in the same relative order each time, unless the user changes the order. Items may be added or removed on some pages as long as the repeated items keep their order relative to each other.

Level
AA
Since
WCAG 2.0
Principle
Understandable
Guideline
3.2 Predictable
Try the live demo All criteria Checklist

Live demo

Compare the menu across three pages

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Switch between the pages in each version and watch where the menu links sit. The engine marks whether the menu keeps the same place and order.

Live example

Passes

Handmade cushions and throws

Everything we sell is made in our workshop in small batches.

Shop

Browse cushions, throws and gift sets. Prices include sales tax.

Delivery

Orders placed before noon leave our workshop the same day.

What happened

    Why it passes

    The menu sits at the top of every page with the links in the same order, so once you learn where Contact is, you can find it on any page.

    Why it fails

    On the Shop page the links are shuffled, and on the Delivery page the menu moves below the content, so you have to hunt for the same links on each page.

    Examples

    Code that fails, and the fix

    Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 13 lines

    Fails

    Menu order changes between pages

    Live preview

    HTML
    <!-- Home page --><nav aria-label="Main">  <a href="/">Home</a> <a href="/shop/">Shop</a>  <a href="/delivery/">Delivery</a> <a href="/contact/">Contact</a></nav> <!-- Shop page --><nav aria-label="Main">  <a href="/shop/">Shop</a> <a href="/contact/">Contact</a>  <a href="/">Home</a> <a href="/delivery/">Delivery</a></nav>

    The same four links appear in a different order on the Shop page, so people who learned where Contact is have to search for it again.

    Passes

    Same order on every page

    Live preview

    HTML
    <!-- The same list on every page; only aria-current moves --><nav aria-label="Main">  <ul>    <li><a href="/">Home</a></li>    <li><a href="/shop/" aria-current="page">Shop</a></li>    <li><a href="/delivery/">Delivery</a></li>    <li><a href="/contact/">Contact</a></li>  </ul></nav>

    The links keep their order on every page. Marking the current page with aria-current tells screen reader users where they are without changing the order.

    02

    Fails

    Skip link moves after the menu

    Live preview

    HTML
    <!-- Home and Shop pages: skip link first --><a class="skip" href="#main">Skip to content</a><nav aria-label="Main"><!-- the same menu links --></nav> <!-- Checkout page: skip link after the menu --><nav aria-label="Main"><!-- the same menu links --></nav><a class="skip" href="#main">Skip to content</a>

    The skip link is a repeated navigation mechanism, so it has to keep its place. On the checkout page, keyboard users must tab through the whole menu before they reach it.

    Passes

    Extra link added, order kept

    Live preview

    HTML
    <!-- Account pages add Orders; the shared links keep their order --><nav aria-label="Main">  <ul>    <li><a href="/">Home</a></li>    <li><a href="/shop/">Shop</a></li>    <li><a href="/account/orders/">Orders</a></li>    <li><a href="/delivery/">Delivery</a></li>    <li><a href="/contact/">Contact</a></li>  </ul></nav>

    Adding a link on some pages is allowed, as long as the repeated links stay in the same order relative to each other.

    Why it matters

    Who it helps

    People using screen magnification or screen readers, and people with cognitive disabilities, learn where navigation is and rely on it staying the same. A consistent order lets them find links quickly without relearning each page.

    W3C: Understanding 3.2.3

    • Level AA

      Level AA is the level most laws and policies require.

    • In WCAG versions

      Part of WCAG 2.0 since December 2008, and of every version after it.

      WCAG 1.0 checkpoints: 13.4, 14.3

    • Where it is required

      Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Identify navigation blocks repeated across pages, such as the main menu, breadcrumbs, search, and skip links.
    2. Compare several pages and confirm those blocks, and the links within them, appear in the same relative order.
    3. Check the order both visually and in the reading order of the code.

    Common failures

    Where it breaks

    • The main menu links appear in a different order on some pages than on others.
    • The search box and main menu swap positions between sections of the same site.
    • A skip link comes first on most pages but is placed after the menu on others.

    Related