• 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 

<!-- Forecast screen: saves an image -->
<button aria-label="Download">Download icon</button>

<!-- Historical data screen: actually opens a CSV export wizard -->
<button aria-label="Download">Download icon</button>

Why it matters

Both buttons announce as Download with the identical icon, but one saves an image while the other launches a multi-step CSV export, so a user can't predict what pressing it will do.

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

When two controls do genuinely different things, give them distinct icons and distinct accessible names, not the same pair reused.

<!-- Forecast screen -->
<button aria-label="Download forecast image">Download icon</button>

<!-- Historical data screen -->
<button aria-label="Export data to CSV">Export icon</button>

Outcome

A user picks the right button on the first try because its name matches what actually happens.

Who is affected

Screen reader users who trust the label to predict the outcome get a different, more involved workflow than the one they expected.

Learn more

Related scenarios