Consistent Navigation

In brief

People learn where things are on a site and expect to find them in the same place. If the menu, search box or language selector keeps changing places, users with low vision, cognitive disabilities or who rely on screen readers have to search again on every page.

This criterion requires that 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.

What does it cover?

• Same relative order: Repeated items keep the same position relative to the other items. Items can be added or removed, such as when a menu expands, as long as the remaining items stay in the same order.
• Which mechanisms: Repeated navigation such as a main menu, a footer menu, a search form, a breadcrumb, a skip link or a language selector.
• Set of web pages: A collection of pages with a common purpose, made by the same author, group or organisation. Different language versions are different sets. A checkout that drops the site navigation is not part of the product page set.
• Allowed: Sub-navigation and secondary menus are not prohibited. Users can also change the order through a user agent or a setting.
• Source order and visual order: The criterion concerns both the layout and the source order, so that users of magnification and of screen readers both find things in the same place.
• Skip links: W3C advises that a "skip to main content" link be the first link on every page, and that, where navigation sits at the end of pages, a "skip to navigation" link be consistently at the beginning.
• Out of scope: Naming the same function the same way is 3.2.4. Bypassing repeated blocks is 2.4.1. Multiple ways to find pages is 2.4.5.

Who does it affect?

People with low vision who use magnification and rely on page layout. People with cognitive and learning disabilities who rely on predictable positions. Screen reader users, who move through content in order and depend on a stable structure. People who use spatial memory to find controls, including people with intellectual disabilities.

In the EAA and EN 301 549

The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. Consistent navigation is part of "understandable".

The technical counterpart is the standard EN 301 549, which incorporates WCAG 3.2.3 by reference and turns it into separate clauses for each kind of ICT.

In EN 301 549 V3.2.1 the software clause did not carry this criterion, because it concerns sets of web pages. Check whether V4.1.1 changes that. Whether and how the criterion applies to non-web documents is stated in clause 10 of the standard. Clause numbers follow the "9. + WCAG number" pattern of EN 301 549. In V3.2.1 the software clause is divided into further subclauses for open and closed functionality. Check the exact numbers in the standard when you cite them.

Standard version: EN 301 549 V4.1.1 (September 2026) is based on WCAG 2.2 and is the first version prepared specifically for the EAA. It has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. The text of criterion 3.2.3 is the same in WCAG 2.1 and 2.2. It is a Level AA criterion.

A note on EAA scope: Article 2(4) of the Directive excludes certain content from the requirements, for example office file formats published before 28 June 2025 and archives that are not updated after that date. Content you publish or change after that date is not covered by these exclusions.

Directive (EU) 2019/882, EUR-Lex, opens in a new tab

Code examples for the web

1. A navigation menu in a different order

The same links in a different order on two pages fails (F66).

<!-- Page A -->
<nav><a href="/">Home</a><a href="/products">Products</a><a href="/about">About</a></nav>
<!-- Page B -->
<nav><a href="/about">About</a><a href="/">Home</a><a href="/products">Products</a></nav>

<!-- All pages use the same navigation include -->
<nav><a href="/">Home</a><a href="/products">Products</a><a href="/about">About</a></nav>

2. One shared component

Build repeated navigation once, in a shared template or component, so the order cannot drift (G61).

<!-- Navigation copied into each page and edited separately -->

<!-- layout.html -->
<header>{% include "nav.html" %}</header>
<main>{% block content %}{% endblock %}</main>

3. An expanding menu

Sub-items can appear, as long as the existing items keep their relative order.

<nav>… <a href="/support">Support</a> <a href="/products">Products</a> …</nav> <!-- order flips when expanded -->

<nav>
  <a href="/products">Products</a>
  <ul hidden id="sub"><li><a href="/products/a">A</a></li></ul>
  <a href="/support">Support</a>
</nav>

4. The skip link comes first on every page

Keep a skip link in the same place, as the first focusable item.

<!-- skip link first on some pages, after the logo on others -->

<body>
  <a class="skip" href="#main">Skip to main content</a>
  <header>…</header>
  <main id="main">…</main>

5. The search form stays in place

Keep the search form in the same position relative to the other header items.

<!-- Search before the menu on the home page, after it on inner pages -->

<header>
  <a href="/" class="logo">Corp</a>
  <nav>…</nav>
  <form role="search">…</form>
</header>

6. A user-initiated change is allowed

When the user chooses to reorder or hide parts of the menu, that does not violate the criterion.

<!-- The site reorders its menu by itself on each visit -->

<!-- The user reorders their shortcuts, and the new order applies everywhere -->

Code examples for mobile

In an app, the equivalent is the tab bar, the toolbar and the menu. Keep their items in the same order on every screen of the same flow.

iOS (SwiftUI)

import SwiftUI

struct RootView: View {
    var body: some View {
        // The same tabs, in the same order, on every screen that shows the bar
        TabView {
            HomeView().tabItem { Label("Home", systemImage: "house") }
            SearchView().tabItem { Label("Search", systemImage: "magnifyingglass") }
            ProfileView().tabItem { Label("Profile", systemImage: "person") }
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.material3.*
import androidx.compose.runtime.Composable

@Composable
fun AppNavigationBar(selected: String, onSelect: (String) -> Unit) {
    // One shared component, so the order is identical on every screen
    NavigationBar {
        listOf("Home", "Search", "Profile").forEach { item ->
            NavigationBarItem(
                selected = selected == item,
                onClick = { onSelect(item) },
                icon = { /* icon */ },
                label = { Text(item) }
            )
        }
    }
}

How to test

• Identify repeated navigation: List the menus, search forms, breadcrumbs, skip links and language selectors repeated across the pages.
• Compare several pages: Look at the home page, a content page, a form and a long page. Is the relative order of the repeated items the same?
• Compare the source order: Check the order in the markup, or tab through each page. Is it the same?
• Check expanding menus: When a menu expands, do the other items keep their order?
• Check different sets: Evaluate each set of pages separately. A checkout or a different language version may form its own set.
• Check at several sizes: Layouts at different breakpoints may differ, but each should be consistent within itself.
• Use a checker as a starting point: Automated tools cannot compare pages for relative order. A person must compare them.

Common mistakes

• Navigation links in a different order on different pages: The failure W3C describes (F66).
• Navigation copied into each page: Edits drift apart over time.
• A skip link that appears only sometimes: Or appears in a different place.
• A search form that moves: Placed before the menu on one page and after it on another.
• A different footer on some pages: Repeated footer links in another order.
• Reordering by an algorithm: Menus that reorder themselves by popularity on each visit.
• Treating a new template as exempt: Pages of the same set must stay consistent.
• Confusing this with identical pages: Pages may differ, but the repeated mechanisms must keep their order.

Sources

• Understanding SC 3.2.3: Consistent Navigation (W3C), opens in a new tab
• G61: Presenting repeated components in the same relative order each time they appear (W3C), opens in a new tab
• F66: Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages (W3C), opens in a new tab
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), opens in a new tab
• EN 301 549 V4.1.1 (ETSI), opens in a new tab
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), opens in a new tab

Standard version: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official texts of the European Accessibility Act (Directive (EU) 2019/882) and EN 301 549.