- Success Criterion 2.4.6
- Conformance level AA
Heading or Label That Fails to Describe Its Own Purpose
2.4.6 — Headings and Labels
Scenario
Setting
A music streaming app's playlist screen
What’s wrong
Playlist controls are labeled with generic text like "Button" and "Item" instead of descriptive labels such as "Shuffle playlist" or "Add to queue," so the label doesn't describe what the control does.
Example
<button aria-label="Button" onclick="shuffle()">Shuffle icon</button>
<div role="listitem" aria-label="Item">
<span>Blinding Lights - The Weeknd</span>
<button aria-label="Button" onclick="addToQueue()">+</button>
</div> Why it matters
A screen reader user hears Button, Button, Item repeated across the playlist and can't tell shuffle from queue from the song row.
How to test
Read every heading and field label out of context: each must describe its section's topic or the field's purpose on its own — vague or missing description fails.
How to fix
Labels like Button or Item describe the element type, not its purpose, which is what 2.4.6 requires.
<button aria-label="Shuffle playlist" onclick="shuffle()">Shuffle icon</button>
<div role="listitem">
<span>Blinding Lights - The Weeknd</span>
<button aria-label="Add Blinding Lights to queue" onclick="addToQueue()">+</button>
</div> Outcome
A listener hears Shuffle playlist and Add to queue and operates each control with confidence.
Who is affected
Screen reader users controlling playback can't distinguish controls that all announce the same generic word.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Generic Section Heading Like ‘Introduction’ That Says Nothing
- Identical Headings Repeated Over Completely Different Content
- Form Label Like ‘Field 1’ That Doesn’t Describe Its Purpose
- Same Label Used for Two Different Fields on One Form
- Clever Marketing Heading That Hides What a Section Actually Does
- Button Labeled ‘OK’ on a Destructive, Irreversible Action