- Success Criterion 3.2.4
- Conformance level AA
Same Icon Meaning Different Things on Different Pages
3.2.4 — Consistent Identification
Scenario
Setting
A weather app's forecast screen
What’s wrong
Download icon meaning "download" here and "export" there with identical glyph and names undifferentiated (inconsistent identification of different functions using same identifier).
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 an icon's meaning across the site: if the same-looking icon means 'download' in one place and 'export' in another with no distinguishing name, it fails.
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 weather app's forecast screen, this barrier is gone for screen-reader users and people with cognitive disabilities who rely on consistent naming — they get the same result as anyone else here.
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
- Shopping Cart Alternating Between ‘Cart’, ‘Basket’, and ‘Bag’
- Identical Icon Given Different Accessible Names for One Function
- Print Function Labeled Inconsistently Across the Site
- Same Download Feature Announced With Different Alt Text