• Success Criterion 2.4.7
  • Conformance level AA

Keyboard Focus Landing on an Unstyled, Invisible Target

2.4.7 — Focus Visible

Scenario

Setting

A podcast app's episode list

What’s wrong

Focus moved to containers with no styling (div tabindex="-1" (code removing it from the Tab order) targets flashing nothing).

Example 

<div id="player-wrapper" tabindex="-1">
  <audio src="episode-42.mp3" controls></audio>
</div>

Why it matters

Focus lands on an invisible wrapper div with no outline, so the listener has no idea where the page's attention just went.

How to test

Tab to a container given tabindex="-1" as a scroll/focus target: if it has no visible styling, focusing it shows nothing on screen.

How to fix

Any element made focusable with tabindex="-1" for scripting still needs a visible focus style if focus can land there.

#player-wrapper:focus-visible {
  outline: 2px solid #1a56db;
}

Outcome

A listener selects an episode and sees the player area clearly outlined as the new focus target.

Who is affected

Keyboard and screen magnification users lose track of focus whenever it's programmatically sent to an unstyled container.

Learn more

Related scenarios