- 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
Try this on a podcast app's episode list: focus moved to containers with no styling (div tabindex="-1" (code removing it from the Tab order) targets flashing nothing).
Why it matters
Sighted keyboard users and low-vision users who must see where focus is. The practical effect on a podcast app's episode list: they lose track of where they are on the page.
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
A clearly visible focus indicator must appear, in full, on every interactive element when it receives keyboard focus.
Outcome
That one change on a podcast app's episode list means they reach and operate the control without a mouse, specifically for the “Keyboard Focus Landing on an Unstyled, Invisible Target” issue on a podcast app's episode list.
Who is affected
Sighted keyboard users and low-vision users who must see where focus is.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Element Losing Keyboard Focus the Instant It’s Reached
- Focus Outline Removed by CSS With No Replacement
- Global CSS Reset Removing Every Focus Outline Site-Wide
- Focus Indicator Styled for Some Components but Not Others
- Focus Indicator That’s Just a Subtle, Hard-to-See Color Shift
- Focus Style That Only Appears on Hover, Never on Tab Focus