WCAG 3.2.4 Consistent Identification: Same Function, Same Label

Last updated: 2026-03-22

Level AA Understandable WCAG 3.2.4

What This Criterion Requires

WCAG 3.2.4 requires that components that have the same functionality within a set of web pages are identified consistently. This means that if a search function appears on multiple pages, it should be labeled the same way each time, using the same icon, the same label text, and the same alternative text. If a print button uses a printer icon with the label Print on one page, it should not use a different icon labeled Print this page on another page. Consistency applies to text labels, icon labels, alternative text for images, and ARIA labels. The criterion does not require that all components look identical, only that components with the same function are identified using the same text and alternative text across the site. Different functions can and should have different labels. This criterion works together with 3.2.3 (Consistent Navigation) to create a predictable, learnable user interface across the entire website.

Why It Matters

Consistent identification reduces cognitive load for all users and is particularly important for users with cognitive disabilities who rely on recognizing familiar labels and icons. When a search function is labeled Search on one page and Find on another, users with cognitive disabilities may not realize it is the same function and may become confused or think functionality is missing. Screen reader users learn the names of common components and navigate by searching for them. If the search landmark is named Site Search on some pages and Search Form on others, screen reader users must try multiple names to find the same component. Users with low vision who rely on icon recognition benefit from consistent use of the same icon for the same function. Inconsistent identification forces users to relearn the interface on every page, which is inefficient for all users and creates a significant barrier for users with cognitive, visual, or learning disabilities. Consistent identification is also a sign of professional design and development practices.

Common Failures and How to Fix Them

Same function labeled differently across pages

A search function has different labels on different pages. On the homepage it says Search, on the blog it says Find Articles, and on the product page it says Look Up Products. Users cannot identify these as the same function.

Inaccessible 
<!-- Homepage -->
<form role="search">
  <label for="s1">Search</label>
  <input type="search" id="s1">
  <button>Search</button>
</form>

<!-- Blog page -->
<form role="search">
  <label for="s2">Find Articles</label>
  <input type="search" id="s2">
  <button>Find</button>
</form>

<!-- Product page -->
<form role="search">
  <label for="s3">Look Up Products</label>
  <input type="search" id="s3">
  <button>Go</button>
</form>
Accessible 
<!-- All pages use the same label -->
<form role="search">
  <label for="site-search">Search</label>
  <input type="search" id="site-search" name="q">
  <button type="submit">Search</button>
</form>

Icons for same function have different alt text

A social media link uses a Twitter icon that is labeled differently on different pages, sometimes as Twitter, sometimes as Follow us on X, and sometimes with empty alt text.

Inaccessible 
<!-- Page 1 -->
<a href="https://x.com/example">
  <img src="x-icon.svg" alt="Twitter">
</a>

<!-- Page 2 -->
<a href="https://x.com/example">
  <img src="x-icon.svg" alt="Follow us on X">
</a>

<!-- Page 3 -->
<a href="https://x.com/example">
  <img src="x-icon.svg" alt="">
</a>
Accessible 
<!-- All pages use the same identification -->
<a href="https://x.com/example" aria-label="Follow us on X (opens in new tab)">
  <img src="x-icon.svg" alt="" aria-hidden="true">
</a>

How to Test

  1. Identify all components that appear on multiple pages with the same function (search, login, print, share, social media links, etc.).
  2. Compare the text labels, aria-labels, alt text, and button text for each instance and verify they are consistent across all pages.
  3. Check that icon-only controls use the same accessible name on every page where they appear.
  4. Verify that components with different functions have different labels to avoid confusion.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria