WCAG 2.1 · Level AA · Operable
WCAG 2.4.7 — Focus Visible, explained with examples
Any keyboard-operable interface must have a visible indicator showing which element has focus. Removing the default focus outline is one of the most common style "improvements" — and one of the most damaging accessibility regressions. Without focus visibility, keyboard users cannot tell where they are on the page.
- Number
- 2.4.7
- Level
- AA
- Principle
- Operable
- Guideline
- 2.4 Navigable
Why this criterion exists
Removing the default focus outline is one of the most common style "improvements" — and one of the most damaging accessibility regressions. Without focus visibility, keyboard users cannot tell where they are on the page.
If you only remember one thing: any keyboard-operable interface must have a visible indicator showing which element has focus. Everything else on this page is detail.
Who feels it when this fails
Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Focus Visible affects:
Keyboard users
Voice control users
How sites typically fail it
These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.
outline: none with no replacement
Focus indicator below 3:1 contrast
How to test for it
Tab through the page in default browser styles, then in your CSS — the indicator must remain visible.
Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.
A code fix you can copy
:focus-visible only shows the ring for keyboard interaction, leaving the cleaner experience for mouse users.
The problem
*:focus { outline: none; }The fix
:where(button, a, input, [tabindex]):focus-visible {
outline: 2px solid #0891b2;
outline-offset: 2px;
}:focus-visible only shows the ring for keyboard interaction, leaving the cleaner experience for mouse users.
Other Operable criteria
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.