WCAG 2.2 Demo Suite

2.4.5 Level AA Guideline 2.4 Navigable Added in WCAG 2.0 Not detectable automatically

Multiple Ways

More than one way is available to locate a page within a set of pages, unless the page is a step in a process.

Who this affects

Users with cognitive disabilities who find hierarchical menus hard to navigate and prefer search. Users who think in different organisational models than the site's designers.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 2.4.5

Open the failing example in a new tab

fail.html — the problem

<!-- FAILURE: exactly one route to any page - a single hierarchical menu.
     No search, no site map, no breadcrumb trail, no related links, no A-to-Z.

     If the user's mental model does not match the one the menu was built
     around, they are stuck. That falls hardest on users with cognitive
     disabilities, who often cannot reconstruct someone else's category
     scheme, and on anyone who knows the exact title they want and simply
     wants to type it. -->
<nav class="nav" aria-label="Main">
  <ul>
    <li><a href="#a">Fiction</a></li>
    <li><a href="#a">Non-fiction</a></li>
    <li><a href="#a">Children's</a></li>
    <li><a href="#a">Events</a></li>
  </ul>
</nav>

<h1>Non-fiction</h1>
<p>Browse our non-fiction shelves.</p>
<p id="a">Section.</p>

Meets 2.4.5

Open the passing example in a new tab

pass.html — the fix

<!-- WAY 1: search. For most sites this is the single highest-value addition,
     because it does not require the user to guess your categories. -->
<form role="search" class="field">
  <label for="q">Search the catalogue</label>
  <input type="search" id="q" name="q">
  <button type="submit" class="button">Search</button>
</form>

<!-- WAY 2: the navigation menu. -->
<nav class="nav" aria-label="Main">
  <ul>
    <li><a href="#a">Fiction</a></li>
    <li><a href="#a">Non-fiction</a></li>
    <li><a href="#a">Children's</a></li>
    <li><a href="#a">Events</a></li>
    <li><a href="#map">Site map</a></li>
  </ul>
</nav>

<!-- WAY 3: a breadcrumb trail, which also satisfies 2.4.8 Location at AAA. -->
<nav class="crumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="#a">Home</a></li>
    <li><a href="#a">Books</a></li>
    <li><span aria-current="page">Non-fiction</span></li>
  </ol>
</nav>

<h1>Non-fiction</h1>
<p>Browse our non-fiction shelves.</p>

<!-- WAY 4: a site map. -->
<h2 id="map">Site map</h2>
<ul>
  <li><a href="#a">Fiction</a></li>
  <li><a href="#a">Non-fiction</a>
    <ul><li><a href="#a">History</a></li><li><a href="#a">Nature</a></li></ul></li>
  <li><a href="#a">Events</a></li>
</ul>

<!-- The criterion asks for TWO OR MORE ways. Any two of: search, a site map,
     a table of contents, a navigation menu, related links, or an A-to-Z index.

     The exception: a page that is a STEP IN A PROCESS is exempt - you do not
     need two routes to step 3 of a checkout, and offering them would be
     actively confusing. -->

<p id="a">Section.</p>

How to test it

Confirm at least two of: site search, a site map, a navigation menu, a table of contents, or related-page links. Steps within a checkout or wizard are exempt.

  • Automated

    Requires evaluating the site's navigation options as a whole.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification