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

button:focus { outline: none; }

Why it matters

Sighted keyboard users and low-vision users who must see where focus is.

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. button:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; } Removing the focus outline with no replacement makes it impossible to see which element has keyboard focus.

Outcome

On a fitness app's workout tracker, this barrier is gone for sighted keyboard users and low-vision users who must see where focus is — they can complete the task without hitting this wall.

Who is affected