Focus Visible: WCAG 2.4.7 and Visible Focus Styles

Focus visible means that people who use a keyboard can always see where they are on a page. When they press Tab, the active link, button or form field gets a clear focus indicator – typically an outline or ring around it. Without it, keyboard users are navigating blind: they press keys but cannot tell which element will react.

What it means

WCAG 2.4.7 Focus Visible is a Level AA criterion of WCAG 2.2. It says: "Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible." The W3C adds that the indicator must not disappear after a few seconds. Through EN 301 549 (clause 9.2.4.7) it is part of what the European Accessibility Act expects.

The criterion matters for everyone who relies on keyboard navigation, and for people with attention, short-term memory or executive-function limitations who need to find their place again quickly.

2.4.7 does not prescribe how the focus indicator looks. Other criteria fill that gap:

The browser's default focus indicator can be enough – the W3C accepts it as technique G165 – as long as it stays visible on your colors.

Examples

A good focus style uses a color with enough color contrast and some space around the element. The CSS pseudo-class :focus-visible shows the outline for keyboard users without showing it on every mouse click.

<style>
  /* Fails 2.4.7: focus indicator removed */
  a:focus, button:focus { outline: none; }

  /* Passes: clear outline for keyboard focus, 5.98:1 on white */
  a:focus-visible, button:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
</style>

A light gray outline like #cccccc on white reaches only 1.61:1. It is technically there, but most people will not see it, and it fails 1.4.11.

How to check focus visible

Questions