• 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 

<!-- Step 1 -->
<button aria-label="Next">Chevron icon</button>

<!-- Step 2 -->
<button aria-label="Continue">Chevron icon</button>

<!-- Step 3 -->
<button aria-label="Forward">Chevron icon</button>

Why it matters

A parent booking childcare hears Next, then Continue, then Forward for the identical chevron button, making a routine multi-step booking feel like it changes tools each screen.

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

Keep the accessible name identical across every occurrence of the same visual control and function.

<!-- Every step -->
<button aria-label="Next">Chevron icon</button>

Outcome

A parent moves through all three booking steps hearing the same Next button each time.

Who is affected

Screen reader users moving through a wizard rely on one predictable name to know they're using the same control repeatedly.

Learn more

Related scenarios