Fix · Serious · cited in audits
How to fix: invisible focus indicator
Tabbing through the page shows nothing about which element has focus. outline:none without a replacement removes the indicator entirely.
- WCAG references
- 2.4.7
- Severity
- Serious
What it looks like in the wild
Tabbing through the page shows nothing about which element has focus.
The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.
Why it fails WCAG
outline:none without a replacement removes the indicator entirely.
Map this back to 2.4.7 when you log the bug. Auditors and procurement teams expect that mapping; "broken" is not enough context.
The wrong pattern (avoid)
*:focus { outline: none; }The right pattern (copy this)
:where(button, a, input, [tabindex]):focus-visible {
outline: 2px solid #0891b2;
outline-offset: 2px;
}Notes from real audits
:focus-visible avoids the ring on mouse click, keeps it for keyboard.
Related fixes
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.