- 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
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Same Feature Given a Different Name on Different Pages
- Search Function Labeled ‘Search’ Here and ‘Find’ Elsewhere
- Same Icon Meaning Different Things on Different Pages
- Shopping Cart Alternating Between ‘Cart’, ‘Basket’, and ‘Bag’
- Print Function Labeled Inconsistently Across the Site
- Same Download Feature Announced With Different Alt Text