• Success Criterion 3.2.4
  • Conformance level AA

Identical Icon Given Different Accessible Names for One Function

3.2.4 — Consistent Identification

Scenario

Setting

A childcare-booking service's scheduling page

What’s wrong

Identical "next" chevron icons with different accessible names ("Next", "Continue", "Forward") for the same function.

Example

<button aria-label="Add to favorites">★</button> <!-- called "Save" on another page -->

Why it matters

Screen-reader users and people with cognitive disabilities who rely on consistent naming.

How to test

Compare a repeated function's icon and accessible name across pages (e.g., 'next' chevrons): different names ('Next', 'Continue', 'Forward') for the identical function fail.

How to fix

The same function must use the same name, label, and icon across all pages.

<button aria-label="Add to favorites">★</button> <!-- same label everywhere this action appears -->

The same function needs the same accessible name everywhere it appears, so users learn it once.

Outcome

On a childcare-booking service's scheduling page, this barrier is gone for screen-reader users and people with cognitive disabilities who rely on consistent naming — they can finish what they came here to do.

Who is affected

Screen-reader users and people with cognitive disabilities who rely on consistent naming.

Learn more