WCAG 2.2 Demo Suite

3.2.4 Level AA Guideline 3.2 Predictable Added in WCAG 2.0 Not detectable automatically

Consistent Identification

Components with the same functionality within a set of pages are identified consistently — the same label, name, and icon for the same action.

Who this affects

Screen reader users who learn a control by its name. Users with cognitive disabilities who must otherwise relearn the interface on each page. Calling the same action Search, Find, and Go on three pages triples the learning cost.

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 3.2.4

Open the failing example in a new tab

fail.html — the problem

<h1>The same action, named three ways</h1>

<div class="pages">
  <!-- All three buttons do exactly the same thing: add the item to the basket.
       Each is named differently. A screen reader user who has learned
       "Add to basket" now has to work out, on every page, which control is the
       one they already know. -->
  <div class="mini">
    <h2>Product page</h2>
    <button type="button" class="button">Add to basket</button>
  </div>

  <!-- FAILURE 1: same function, different name. -->
  <div class="mini">
    <h2>Search results</h2>
    <button type="button" class="button">Buy now</button>
  </div>

  <!-- FAILURE 2: same function, different name AND a different icon, with the
       accessible name different again. -->
  <div class="mini">
    <h2>Wish list</h2>
    <button type="button" class="button" aria-label="Purchase">
      <span aria-hidden="true">🛍</span> Get it
    </button>
  </div>
</div>

<!-- The mirror-image failure is just as bad: using the SAME name for two
     different functions - a "Download" button that downloads a PDF on one page
     and opens a signup form on another. -->

Meets 3.2.4

Open the passing example in a new tab

pass.html — the fix

<h1>The same action, named the same way</h1>

<div class="pages">
  <!-- FIX: one function, one name, one icon, everywhere. The user learns it
       once. This costs nothing to implement and is almost always a
       copywriting and design-system problem rather than a code problem. -->
  <div class="mini">
    <h2>Product page</h2>
    <button type="button" class="button"><span aria-hidden="true">🛒</span> Add to basket</button>
  </div>

  <div class="mini">
    <h2>Search results</h2>
    <button type="button" class="button"><span aria-hidden="true">🛒</span> Add to basket</button>
  </div>

  <div class="mini">
    <h2>Wish list</h2>
    <button type="button" class="button"><span aria-hidden="true">🛒</span> Add to basket</button>
  </div>
</div>

<!-- Note what "consistent" means here. It is about the ACCESSIBLE NAME and the
     function, not about pixels. The same action may look different in
     different contexts - a large primary button on the product page, a compact
     one in a results list - as long as it is called the same thing.

     Where two things genuinely differ, name them differently: "Download PDF"
     and "Download spreadsheet" are correctly distinct.

     A practical audit technique: list every control's accessible name across
     your sample and sort it. Duplicated functions with different names, and
     identical names doing different jobs, both jump out immediately. -->

How to test it

List the accessible names and icons for equivalent controls across pages. The same function must carry the same name. Watch for a print icon labelled Print on one page and Export on another.

  • Automated

    Requires cross-page comparison and understanding which controls are functionally equivalent.

    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