• Success Criterion 4.1.2
  • Conformance level A
  • W3C reference F79

Assistive Technology Never Told Which Element Currently Has Focus

4.1.2 — Name, Role, Value

Scenario

Setting

A music streaming app's playlist screen

What’s wrong

Assistive technology is never told which element currently has focus, or that focus changed — screen readers lose track of the user's position.

Example 

<div class="playlist-item" style="outline:none">Bohemian Rhapsody</div>
<div class="playlist-item highlighted" style="outline:none">Don't Stop Believin'</div>
<!-- JS moves a CSS "highlighted" class on arrow-key press, outline:none hides the focus ring,
     and focus() is never called on the item -->

Why it matters

A screen reader user pressing arrow keys hears nothing change and loses track of which song is selected.

How to test

Tab to a control and check DevTools' Accessibility panel: if the focused/unfocused state isn't exposed or announced, it fails.

How to fix

Never remove the focus outline without also confirming that real DOM focus actually moves.

<div class="playlist-item" tabindex="-1" id="track2">Don't Stop Believin'</div>
// JS: document.getElementById('track2').focus();

Outcome

A listener arrows down the playlist and hears each track name announced in turn.

Who is affected

Screen reader users and keyboard-only users navigating the playlist cannot tell which track is currently focused.

Learn more

Related scenarios