WCAG 2.4.7 Focus Visible

Success criterion 2.4.7 makes sure keyboard users can see where they are on the page. Without a visible focus indicator, pressing Tab is like moving a mouse with an invisible cursor: sighted keyboard users — people with motor disabilities, many people with low vision, power users — cannot tell which link or button will react. It is level AA and part of EN 301 549 (clause 9.2.4.7).

What the criterion requires

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

In practice: whenever an element receives focus from the keyboard, there is a visible indicator — the browser's default outline or a custom style. Documented failures:

• styling that removes or hides the focus indicator (outline: none, outline: 0 or a border that hides it) without a visible replacement;
• scripts that remove focus from an element as soon as it receives it.

WCAG 2.2 also added 2.4.13 Focus Appearance at level AAA, with size and contrast rules for the indicator; at level AA only visibility is required.

Typical failures on an online shop

• a theme reset with *:focus { outline: none; } to hide the "ugly" ring after mouse clicks;
• buttons and swatches with a custom style that only changes colour very slightly on focus;
• a focus ring the same colour as the brand background, so it disappears on coloured banners;
• custom checkboxes and radio buttons where the real input is hidden and its focus is not shown on the visual replacement;
• product cards where focus goes to an invisible overlay link.

How to check it

Automated: there is no axe-core rule for this criterion. Whether focus is visible depends on what changes on screen when an element is focused, which axe does not compare, so it needs a manual check.

By hand: press Tab through the whole page, including the header, mega menu, filters, product options, cart drawer, forms and footer. At every stop you should see clearly which element has focus. Check on light and dark backgrounds and in popups. If the indicator vanishes, inspect the CSS for outline: none or :focus rules.

How to fix it

• Never remove the outline without a replacement. Use :focus-visible to show a strong ring for keyboard users while keeping mouse clicks clean.
• A robust style: :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }, or a two-colour ring that works on any background.
• Show focus on the visible part of custom controls (for example the styled swatch, not the hidden input).
• Aim for 3:1 contrast against adjacent colours so the ring is easy to see.

Related criteria

• 2.4.11 Focus Not Obscured (Minimum) — the focused element must not be hidden behind other content.
• 1.4.11 Non-text Contrast — visual parts of controls need 3:1 contrast.
• 2.4.3 Focus Order — focus must move in a logical order.

Frequently asked questions

Is outline: none a WCAG failure?

It fails 2.4.7 when it removes the focus indicator and nothing else shows where focus is. Removing the default outline is fine if you replace it with a clearly visible custom style.

What is the difference between 2.4.7 Focus Visible and 2.4.13 Focus Appearance?

2.4.7 (level AA) only asks that a focus indicator is visible. 2.4.13 Focus Appearance (level AAA, new in WCAG 2.2) sets a minimum size and a 3:1 contrast change for the indicator.

Does the focus indicator need a minimum contrast?

Not under 2.4.7 itself. But a focus ring is a visual part of a control, so 1.4.11 Non-text Contrast (3:1) is relevant, and an indicator that nobody can see in practice does not make focus visible.