- Success Criterion 2.4.7
- Conformance level AA
Focus-Visible Polyfill Misconfigured to Show Nothing at All
2.4.7 — Focus Visible
Scenario
Setting
A fitness app's workout tracker
What’s wrong
Component libraries with:focus-visible (keyboard-focus styling) polyfill misconfigured so keyboard focus matches mouse and shows nothing.
Example
A fitness app's workout tracker shows the problem clearly: component libraries with:focus-visible (keyboard-focus styling) polyfill misconfigured so keyboard focus matches mouse and shows nothing.
Why it matters
Sighted keyboard users and low-vision users who must see where focus is. On a fitness app's workout tracker, this barrier means they can't complete the task using a keyboard alone.
How to test
Tab through components built with a:focus-visible polyfill: check whether keyboard focus and mouse click are being treated identically (showing nothing) due to misconfiguration.
How to fix
A clearly visible focus indicator must appear, in full, on every interactive element when it receives keyboard focus.
Outcome
Corrected, a fitness app's workout tracker now lets a visitor complete the task using only the keyboard.
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