2.4.7 Focus Visible

What does it mean?

Keyboard users need to see where they are on the page, just as mouse users see the pointer. Browsers show a focus outline by default, but many designs remove it with outline: none and replace it with nothing. Then a keyboard user is effectively working blind.

Every focusable element (links, buttons, form fields, custom widgets) must show a visible indicator while it has keyboard focus. Using :focus-visible lets you show a strong indicator for keyboard users without showing it on every mouse click. The indicator should also have enough contrast against its surroundings (see 1.4.11).

Who does it help?

• Sighted keyboard users, including many people with motor impairments
• People with low vision or attention difficulties who need to keep track of their position
• Users of switch devices and other keyboard-emulating tools

Common failures

• A global CSS reset with *:focus { outline: none; } and no replacement
• A focus style that only changes the colour very slightly, so it cannot be seen
• Custom buttons or cards where the focus style is cut off by overflow: hidden on a parent
• A focus indicator in the same colour as the background

How we test it

• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: Is the keyboard focus always clearly visible? Elements without a detected focus style are flagged.

A person decides every criterion. No criterion ever passes automatically.

How to fix it

*:focus { outline: none; }

:root { --focus: #1a56db; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* also visible in Windows high contrast mode */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}

A thick, offset outline appears for keyboard focus on every element and adapts to forced-colours mode.

Practical tips

• Prefer outline over box-shadow for focus: outlines stay visible in forced-colours (high contrast) mode.
• Check dark sections and images separately; one focus colour may not work on every background.

Guides and patterns on this

• Contrast that everyone can readPale grey text may look refined, but many people struggle to read it, and on a phone in bright sunlight everybody does. Here are the ratios WCAG 2.2 sets and how to lock them into your design.
• Getting there without a mouseMany people use the web without a mouse: with a keyboard, switches, voice control or a screen reader. Here is what has to work for them and how to manage focus properly in modern web apps.
• EAA compliance check: how to get your website tested for accessibilityThe European Accessibility Act asks for accessible services, not for a particular test. This guide explains what each kind of check can tell you, how an audit works, what ours costs, and what you hold at the end.
• Cookie banners that lock no one outThe cookie banner is often the first thing visitors meet, and for some the last: if it cannot be used with a keyboard or screen reader, the site is closed to them. Here is how to get it right.

Official source

Understanding WCAG 2.2 at the W3C: 2.4.7 Focus Visible