Understandable · 3.2 Predictable

Consistent Identification WCAG 3.2.4 · Level AA

Components that perform the same function across a set of pages must be identified consistently, for example with the same visible label, accessible name, icon, and text alternative wherever they appear.

Level
AA
Since
WCAG 2.0
Principle
Understandable
Guideline
3.2 Predictable
Try the live demo All criteria Checklist

Live demo

Compare the same controls on three pages

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Switch between the pages in each version and compare the names of the search button and the cart link.

Live example

Passes

Home

New spring fabrics are in stock now.

Cushions

Choose from twelve sizes and forty fabrics.

Delivery

Standard delivery takes three to five working days.

What happened

    Why it passes

    The search button is called Search and the cart link is called Cart on every page, so you recognize them at once wherever you are.

    Why it fails

    The same search button is called Search, Find and Go, and the cart is announced as Cart, Basket and Bag, so you have to work out each time that they do the same thing.

    Examples

    Code that fails, and the fix

    Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 8 lines

    Fails

    Same search button, different names

    Live preview

    HTML
    <!-- Home page --><form role="search" action="/search/">  <label for="q">Search the shop</label>  <input id="q" type="search" name="q">  <button type="submit">Search</button></form> <!-- Product pages --><form role="search" action="/search/">  <label for="q">Search the shop</label>  <input id="q" type="search" name="q">  <button type="submit">Find</button></form>

    The same function is called Search on one page and Find on another, so people have to work out that the two buttons do the same thing. WCAG documents this as failure F31.

    Passes

    One shared label on every page

    Live preview

    HTML
    <!-- Every page uses this same component --><form role="search" action="/search/">  <label for="q">Search the shop</label>  <input id="q" type="search" name="q">  <button type="submit">Search</button></form>

    The component is identical on every page, so its label and accessible name never change. Building it from one shared template keeps it that way.

    02

    Fails

    Same image link, different text alternatives

    Live preview

    HTML
    <!-- Header on most pages --><a href="/"><img src="/img/logo.svg" alt="Home"></a> <!-- Header on blog pages --><a href="/"><img src="/img/logo.svg" alt="Logo"></a>

    The same image link goes to the home page everywhere, but screen readers announce it as Home on some pages and Logo on others.

    Passes

    Icon button named the same everywhere

    Live preview

    HTML
    <!-- Order page and invoice page --><button type="button" aria-label="Print">  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24">    <path d="M6 9V3h12v6M6 18H4v-7h16v7h-2M8 14h8v7H8z"      fill="none" stroke="currentColor" stroke-width="2"/>  </svg></button>

    The same icon and the same accessible name, Print, appear on both pages, so the button is recognized wherever it appears.

    Why it matters

    Who it helps

    Screen reader and magnifier users, and people with cognitive disabilities, recognize functions by their names and icons. Consistent identification lets them apply what they learned on one page to every other page.

    W3C: Understanding 3.2.4

    • Level AA

      Level AA is the level most laws and policies require.

    • In WCAG versions

      Part of WCAG 2.0 since December 2008, and of every version after it.

      WCAG 1.0 checkpoints: 13.4, 14.3

    • Where it is required

      Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. List components that perform the same function on multiple pages, such as search, print, download, or cart buttons.
    2. Compare their visible labels, accessible names, icons, and text alternatives across those pages.
    3. Confirm each function is identified the same way everywhere it appears.

    Common failures

    Where it breaks

    • A search button is labeled Search on one page and Find or Go on another.
    • The same home link icon has the text alternative Home on some pages and Logo on others.
    • A download link is named Download PDF on some pages and Get file on others.

    Related