Understandable Guideline 3.2 Predictable

3.2.4 Consistent Identification

Call the same thing by the same name everywhere

Level AA Needs a person to check

What it asks for, in plain English

If a control, icon or feature does the same job on different pages, give it the same name, icon and text alternative each time. A magnifying glass that means Search on one page should not be labelled Find on another; a download icon should not have alt text of "PDF" here and "Save" there.

The reverse holds too: do not use one label for two different things. If Next moves to the next page on one screen and to the next photo on another, that needs to be clear from context, or it needs a different name.

It does not demand identical wording for things that are genuinely different, and it does not stop you varying tone across a site. It is about the functions a person meets again and again.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 3.2.4 page has the full intent, techniques and definitions.

Who it affects

A person with a cognitive disability learns what the envelope icon does once and expects it to mean the same thing on every page.

A screen reader user listens for a familiar name such as Add to basket; hearing Buy on one page and Add on another makes them wonder whether these are different actions.

Someone using voice control says "click Search" because that is what the button was called last time, and nothing happens because here it is called Go.

Example

Broken

The same two actions, named Add to basket and Save for later on one page, Buy and Add to wishlist on the next.

Fixed

Same visible text and the same aria-label for the heart on both pages.

Show the markup behind both examples
Broken
<style>body{margin:0;padding:12px;font-family:system-ui;font-size:13px;display:flex;gap:12px}.card{flex:1;border:1px solid #d1d5db;border-radius:6px;padding:10px}.card h2{font-size:14px;margin:0 0 4px}.card small{color:#6b7280;display:block;margin-bottom:10px}.card button{font:inherit;padding:6px 10px;border-radius:4px;border:1px solid #1d4ed8;background:#1d4ed8;color:#fff;margin-right:6px}.card .icon{background:#fff;color:#1d4ed8}</style>
<div class="card"><h2>Lavender</h2><small>Plants page</small><button type="button">Add to basket</button><button type="button" class="icon" aria-label="Save for later">&#9825;</button></div>
<div class="card"><h2>Rosemary</h2><small>Search results page</small><button type="button">Buy</button><button type="button" class="icon" aria-label="Add to wishlist">&#9825;</button></div>
Fixed
<style>body{margin:0;padding:12px;font-family:system-ui;font-size:13px;display:flex;gap:12px}.card{flex:1;border:1px solid #d1d5db;border-radius:6px;padding:10px}.card h2{font-size:14px;margin:0 0 4px}.card small{color:#6b7280;display:block;margin-bottom:10px}.card button{font:inherit;padding:6px 10px;border-radius:4px;border:1px solid #1d4ed8;background:#1d4ed8;color:#fff;margin-right:6px}.card .icon{background:#fff;color:#1d4ed8}</style>
<div class="card"><h2>Lavender</h2><small>Plants page</small><button type="button">Add to basket</button><button type="button" class="icon" aria-label="Save for later">&#9825;</button></div>
<div class="card"><h2>Rosemary</h2><small>Search results page</small><button type="button">Add to basket</button><button type="button" class="icon" aria-label="Save for later">&#9825;</button></div>

How to check it

  1. List the actions that appear on several pages: search, add to basket, download, share, print, sign in.
  2. Visit three pages that offer each one and compare the button text, the icon and the alt text or aria-label.
  3. Check icon-only buttons by hovering or inspecting; the hidden name should be the same each time.
  4. Look for the reverse problem: the same word used for two different actions.

What Websight checks for 3.2.4

Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.

Only a person can check this, since it means comparing one page with another. Websight lists it in its manual checklist.

Practical tips

  • Keep a short vocabulary list for your interface and make everyone use it, including whoever writes the alt text.
  • Build each icon as one component with its name baked in, so the label cannot vary by page.
  • When copy changes, search the codebase for the old wording.

Scan your page and see where 3.2.4 stands

Websight gives a score out of 100, explains each automated finding in plain English, and lists the checks a person still needs to do.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.