• Success Criterion 2.5.3
  • Conformance level A

Visible Label Text Reordered or Broken Apart in the Name

2.5.3 — Label in Name

Scenario

Setting

A streaming music app's search results

What’s wrong

Name contains label but broken apart/reordered so speech engines fail matching in practice, or label string interrupted by injected hidden words *before* it completes.

Example 

const label = `P${track.title}lay ${track.title}`; // meant to be `Play ${track.title}`
playBtn.setAttribute('aria-label', label);
// visible button text is simply "Play"

Why it matters

The word 'Play' never appears whole in the announced name, it's split around the song title, so speech commands don't match.

How to test

Compare the visible label to the accessible name character by character: if the label text is broken apart, reordered, or interrupted by injected hidden words, it fails matching.

How to fix

Keep the visible word intact and add context after it, never split it around inserted text.

const label = `Play ${track.title}`;
playBtn.setAttribute('aria-label', label);

Outcome

A listener says 'click Play' and the track starts without needing to say the song title.

Who is affected

Voice-control users searching for a track, who expect the visible word 'Play' to trigger the button.

Learn more

Related scenarios