WCAG 2.2 Demo Suite

2.4.8 Level AAA Guideline 2.4 Navigable Added in WCAG 2.0 Not detectable automatically

Location

Information about the user's location within a set of pages is available — breadcrumbs, a highlighted current navigation item, or a step indicator.

Who this affects

Users with cognitive disabilities who lose track of where they are in a deep hierarchy, and anyone arriving from search directly onto an inner page.

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.8

Open the failing example in a new tab

fail.html — the problem

<!-- FAILURE 1: no breadcrumb, so a user arriving from search has no idea where
     in the hierarchy this page sits or how to get to the parent section. -->
<nav class="nav" aria-label="Main">
  <ul>
    <li><a href="#a">Books</a></li>
    <!-- FAILURE 2: the current page is signalled by colour alone, with no
         aria-current. A screen reader user is told nothing, and a colour-blind
         user cannot see it either (also failing 1.4.1). -->
    <li><a class="here" href="#a">Nature writing</a></li>
    <li><a href="#a">Events</a></li>
  </ul>
</nav>

<h1>Nature writing</h1>
<p>Our nature writing shelves.</p>

<!-- FAILURE 3: a multi-step process with no step indicator - the user cannot
     tell how far through they are or how much is left. -->
<h2>Reserve a book</h2>
<form>
  <div class="field"><label for="d">Collection date</label><input type="text" id="d"></div>
  <button type="submit" class="button">Continue</button>
</form>

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

Meets 2.4.8

Open the passing example in a new tab

pass.html — the fix

<!-- FIX 1: a breadcrumb trail showing the path from the home page down.
     Marked up as an ordered list inside a labelled nav, so a screen reader can
     find it among the page's landmarks. -->
<nav class="crumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="#a">Home</a></li>
    <li><a href="#a">Books</a></li>
    <li><a href="#a">Non-fiction</a></li>
    <li><span aria-current="page">Nature writing</span></li>
  </ol>
</nav>

<!-- FIX 2: aria-current="page" marks the current item programmatically, and
     the styling uses weight and an underline as well as colour. -->
<nav class="nav" aria-label="Main">
  <ul>
    <li><a href="#a">Books</a></li>
    <li><a href="#a" aria-current="page">Nature writing</a></li>
    <li><a href="#a">Events</a></li>
  </ul>
</nav>

<h1>Nature writing</h1>
<p>Our nature writing shelves.</p>

<!-- FIX 3: a step indicator, with aria-current="step" and the position also
     stated in text. The page title should carry it too - see 2.4.2. -->
<h2>Reserve a book</h2>
<p>Step 2 of 3</p>
<ol class="steps">
  <li>1. Choose a book</li>
  <li aria-current="step">2. Collection date</li>
  <li>3. Confirm</li>
</ol>
<form>
  <div class="field"><label for="d">Collection date</label><input type="text" id="d"></div>
  <button type="submit" class="button">Continue</button>
</form>

<!-- The aria-current values worth knowing:
       page, step, location, date, time, true
     Use the specific one where it fits; "true" is the generic fallback. -->

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

How to test it

Confirm breadcrumbs, a current-page indicator marked with aria-current, or a step counter. The indicator must be programmatic, not colour alone.

  • Automated

    Requires evaluating whether location information is present and meaningful.

    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