Level AA · WCAG 2.0
2.4.7 Focus Visible
Any keyboard-operable element shows a visible focus indicator when it has focus.
Partly automated Some failures are detectable, others need judgement.
How it fails in practice
outline: none in a reset stylesheet, never replaced. A custom focus style that only works on buttons, leaving links invisible.
How to fix it
Never remove the outline without putting something at least as visible in its place. :focus-visible gives you the mouse-user experience designers usually want without taking the indicator away from keyboard users.
At a glance
- Level
- Level AA — the level EN 301 549 requires, and therefore the level the BFSG and the EAA are measured against.
- Principle
- Operable
- Guideline
- 2.4 Navigable
- Added in
- WCAG 2.0
- EN 301 549
- 9.2.4.7
- Automated check
- Partly automated
How to test it by hand
- Press Tab through the page and keep your eyes on the screen: at every stop, can you see where you are without searching?
- Look for
outline: nonewithout a replacement — the most common failure — and for indicators that exist but are too faint to notice. - Check on every background: a focus ring that shows on white can vanish on your brand colour or on a photo.
- Include everything that opens on top — menus, dialogs, cookie banners. Focus inside them has to be visible too.
In code
*:focus { outline: none; }:focus-visible {
outline: 3px solid #1a56db;
outline-offset: 2px;
}Partly automated
How far an automated check gets
A tool finds some failures here and cannot see the rest. A clean automated result means the checks that exist found nothing — not that the criterion is met. This is the gap that makes a green scan look like an accessible site, and it is where the keyboard agent, the agents still in development and a human reviewer do the remaining work.
The keyboard agent tabs through each page and captures what is visible at every stop, so a missing indicator shows up as an actual screenshot rather than a rule id.
Rules that check this criterion
keyboard:focus-visibleFocus not visible Keyboard agentkeyboard:focus-invisibleFocus on an invisible element Keyboard agent
The rule ids are axe-core’s (version 4.14.0), the open-source engine our scan runs, and our keyboard agent’s — the names a report or a CI log will show. An underlined id has a page of its own here.
Where it matters most
The guides that list it among the criteria to check first.
Related criteria
Other criteria under the same guideline.
Further reading
-
Keyboard agent
Keyboard accessibility testing with real keys: the agent tabs through your pages, finds keyboard traps and invisible focus, and records every step.
-
Focus indicator
The visible marker on the element that has keyboard focus, usually an outline; it must be visible (WCAG 2.4.7, Level AA).
-
keyboard:focus-visible
No visible keyboard focus fails WCAG 2.4.7. Why outline: none is usually the cause, how to fix it with :focus-visible, and how to test it.
Find out which criteria your site fails
We scan up to 100 pages against WCAG 2.2 AA, send the keyboard agent through the page you name and email you the report — free, once, no strings.