• Success Criterion 4.1.2
  • Conformance level A

Complex Widget Relying on a Title Attribute for Its Name

4.1.2 — Name, Role, Value

Scenario

Setting

A streaming music app's search results

What’s wrong

title-only names on complex widgets where assistive technology support gaps make the name unavailable in practice (risk-level failure logged against name robustness).

Example 

<div class="result-row" role="button" title="Play Blinding Lights by The Weeknd" tabindex="0" onclick="playTrack(204)">
  <img src="cover.jpg" alt="">
  <span class="track-title">Blinding Lights</span>
  <span class="artist">The Weeknd</span>
</div>
<!-- the only accessible name comes from the title attribute; many screen readers don't reliably read
     title on custom-role elements, and it never shows on touch or keyboard focus -->

Why it matters

A screen reader user tabbing through search results may hear nothing for each row, since title support is inconsistent.

How to test

Inspect a complex widget's name source in DevTools: if it relies only on a title attribute (with known inconsistent AT support), verify the name is still reliably available — if not, it fails.

How to fix

Use aria-label or aria-labelledby for the accessible name; treat title as a supplementary tooltip only.

<div class="result-row" role="button" aria-label="Play Blinding Lights by The Weeknd" tabindex="0" onclick="playTrack(204)">
  <img src="cover.jpg" alt="">
  <span class="track-title">Blinding Lights</span>
  <span class="artist">The Weeknd</span>
</div>

Outcome

A listener hears each result named clearly and picks the right track to play.

Who is affected

Screen reader and touchscreen users searching for a song cannot reliably learn what each result row plays.

Learn more

Related scenarios