3.2.4 Consistent Identification

Level: AA | Principle: Understandable | Since: WCAG 2.0 | Automation: Manual

What This Means

Components that have the same function across multiple pages must be identified consistently. If a search feature is labeled "Search" on one page, it must not be labeled "Find" or "Look up" on another. Same function means same label, same icon, and same alternative text.

Who This Affects

Screen reader users — they identify components by their announced name; inconsistent naming makes the same feature sound like a different one
Cognitive disability users — they rely on consistent labeling to recognize familiar functionality
Voice control users — they speak the label name to activate controls; changing labels breaks their commands
Low vision users — they use text labels to confirm they found the right control

Common Pitfalls

1. Same function, different labels

<!-- Home page -->
<button aria-label="Search">🔍</button>

<!-- Products page — Bad: same icon, different label -->
<button aria-label="Find items">🔍</button>

<!-- Contact page — Bad: yet another label -->
<button aria-label="Look up">🔍</button>

2. Inconsistent icon alt text

<!-- Page A -->
<a href="/cart">
  <img src="cart.svg" alt="Shopping cart">
</a>

<!-- Page B — Bad: same icon, different alt text -->
<a href="/cart">
  <img src="cart.svg" alt="View your bag">
</a>

3. Inconsistent button text for the same action

<!-- Blog listing page -->
<a href="/post/1">Read more</a>
<a href="/post/2">Read more</a>

<!-- News listing page — Bad: same action, different text -->
<a href="/news/1">Continue reading</a>
<a href="/news/2">See full article</a>

How to Fix

Establish a consistent vocabulary

<!-- Every page: same label for search -->
<label for="search">Search</label>
<input id="search" type="search" name="q">
<button type="submit">Search</button>

Use shared components with fixed labels

function SearchBar() {
  return (
    <form role="search" aria-label="Site search">
      <label htmlFor="search">Search</label>
      <input id="search" type="search" name="q" />
      <button type="submit">Search</button>
    </form>
  );
}

Keep icon alt text consistent

<!-- Use the same alt text on every page -->
<a href="/cart">
  <img src="cart.svg" alt="Shopping cart">
  <span class="badge">3</span>
</a>

Document a labeling convention

Maintain a style guide that maps functions to labels:

| Function | Label | Never use | |----------|-------|-----------| | Site search | "Search" | "Find", "Look up", "Query" | | Shopping cart | "Shopping cart" | "Bag", "Basket", "Your items" | | Print page | "Print" | "Print this page", "Printer" | | Close dialog | "Close" | "Dismiss", "X", "Cancel" |

How to Test

Identify components that appear on multiple pages (search, cart, login, print, close buttons) and note their labels.
Navigate to 3-4 different pages and verify each repeated component uses the same label text, aria-label, icon alt text, and visual appearance.
Check icon-only buttons across pages to confirm their aria-label values are consistent (e.g., always "Search," not "Search" on one page and "Find" on another).
Open a screen reader and navigate to repeated components on multiple pages to confirm they are announced identically.
Pass: Every component with the same function uses the same label, icon text, and accessible name across all pages.
Fail: Any component with the same function has different labels, alt text, or accessible names on different pages.

axe-core Rules

This criterion cannot be detected by automated tools. It requires cross-page semantic comparison that axe-core does not perform.