3.2.4 Consistent Identification

WCAG 2.2 · 3.2.4 AA Understandable

What it requires

Components that have the same functionality within a set of web pages must be identified consistently. If a button, link, icon, or form control does the same thing on different pages, it should carry the same label, name, text alternative, and accessible name everywhere it appears. For example, a search icon labelled “Search” on one page should not be labelled “Find” on another, and the same document-download icon should always have the same alt text. The criterion does not forbid intentional differences when the function genuinely differs — only inconsistent labelling of the same function.

  • Screen reader users who recognise functions by their accessible name — inconsistent names make identical controls sound like different things.
  • People with cognitive and learning disabilities, who rely on predictable, repeated labels to navigate confidently.
  • Low-vision users who see only part of the page at a time and depend on consistent wording to relocate familiar controls.

How to detect it

Checks for consistent identification
Check How Catches it?
Manual review Compare repeated components (search, print, download, nav links) across several pages; confirm labels and alt text match. Yes — primary method.
Screen reader Navigate the same control on different pages with NVDA/VoiceOver; the announced name should be identical. Yes.
Image / icon audit List all instances of an icon and verify each shares the same text alternative. Yes.
Automated tools (axe, etc.) Run a scanner across pages. No — cross-page consistency requires human judgement.

How to fix it

  1. Inventory components that repeat across pages and the function each performs.
  2. Choose one canonical label, accessible name, and text alternative per function.
  3. Apply that wording everywhere the component appears; centralise it in shared templates or components.
  4. Ensure icon-only controls share identical alt text or accessible names.
  5. Re-test repeated controls across pages after content changes.

The same download icon should be identified the same way on every page:

<!-- page A and page B, same function, same name -->
<a href="report.pdf">
  <img src="download.svg" alt="Download PDF">
</a>

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule for 3.2.4 — cross-page consistency requires manual review. Use the console check and steps below to gather the repeated controls, then compare them by hand.

Run this in the browser console

consistent-identification-audit.js 
// READ-ONLY: lists repeated controls and their accessible names for manual comparison.
const nodes = [...document.querySelectorAll('a, button, [role=button], img, input')];
const rows = nodes.map(el => ({
  tag: el.tagName.toLowerCase(),
  name: (el.getAttribute('aria-label') || el.alt || el.title || el.textContent || '').trim().slice(0, 60),
  href: el.getAttribute('href') || el.getAttribute('src') || ''
})).filter(r => r.name);
console.table(rows);
nodes.forEach(el => { if ((el.alt || el.getAttribute('aria-label'))) el.style.outline = '2px solid orange'; });

What to check manually: open the same control (e.g. the search or download icon) on two or more pages and confirm its accessible name and alt text are identical; verify the wording matches the control's actual function on every page.