• 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

Related scenarios