Consistent Help

Who this affects

Users with cognitive disabilities who need help and cannot afford to hunt for it in a different place on every page. Anyone under stress mid-task.

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.

<h1>Three pages from the same checkout</h1>
<p>3.2.6 is one of the few criteria you cannot evaluate on a single page. It is
   about consistency <em>across</em> a set of pages, so you have to compare them.</p>

<div class="pages">
  <!-- Page 1: help is a link in the header. -->
  <div class="mini">
    <h2>Step 1: Basket</h2>
    <nav aria-label="Page 1"><ul><li>Home</li><li>Books</li><li><a href="#h">Help</a></li></ul></nav>
    <p>2 items in your basket.</p>
  </div>

  <!-- FAILURE: on page 2 the help link has moved to the very bottom, after the
       content. A user who learned "help is top right" cannot find it. -->
  <div class="mini">
    <h2>Step 2: Delivery</h2>
    <nav aria-label="Page 2"><ul><li>Home</li><li>Books</li></ul></nav>
    <p>Choose a delivery date.</p>
    <p><a href="#h">Help</a></p>
  </div>

  <!-- FAILURE: on page 3 it is missing entirely, and a differently named
       "Contact us" appears in a third position instead. Users have to
       relearn the interface at the exact moment they are stuck. -->
  <div class="mini">
    <h2>Step 3: Payment</h2>
    <p><a href="#h">Contact us</a></p>
    <nav aria-label="Page 3"><ul><li>Home</li><li>Books</li></ul></nav>
    <p>Enter your card details.</p>
  </div>
</div>

<p id="h">Help page.</p>

<h1>Three pages from the same checkout</h1>

<div class="pages">
  <!-- FIX: the help mechanism keeps the same name and the same position
       relative to the rest of the page on every step. "Same relative order"
       is the requirement, not identical pixel position - so a responsive
       layout that moves it visually is still fine, as long as it stays in the
       same place in the sequence of page content. -->
  <div class="mini">
    <h2>Step 1: Basket</h2>
    <nav aria-label="Page 1"><ul><li>Home</li><li>Books</li><li><a href="#h">Help</a></li></ul></nav>
    <p>2 items in your basket.</p>
  </div>

  <div class="mini">
    <h2>Step 2: Delivery</h2>
    <nav aria-label="Page 2"><ul><li>Home</li><li>Books</li><li><a href="#h">Help</a></li></ul></nav>
    <p>Choose a delivery date.</p>
  </div>

  <div class="mini">
    <h2>Step 3: Payment</h2>
    <nav aria-label="Page 3"><ul><li>Home</li><li>Books</li><li><a href="#h">Help</a></li></ul></nav>
    <p>Enter your card details.</p>
  </div>
</div>

<!-- Note what 3.2.6 does NOT require: it does not require you to provide help
     at all. It only says that if help IS present on a page, it must be in a
     consistent place across the pages that have it. Human contact details,
     a contact form, a chat widget, a phone number and self-help all count. -->

<p id="h">Help page.</p>

How to test it

Identify every help mechanism and check its position relative to other page content across the site. Help does not have to be on every page, but where present it must be in a consistent place.

• Automated

  Requires cross-page comparison of help placement.

  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.

Related criteria

• 3.2.3 Consistent Navigation (Level AA)
• 3.3.5 Help (Level AAA)

In the specification

• Understanding 3.2.6 Consistent Help — the W3C explanation, intent and exceptions
• 3.2.6 in the WCAG 2.2 Recommendation — the normative wording