Focused elements must show a visible focus indicator

Rule focus-visible-live · Component patterns (best practice) · impact serious · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Keyboard users need to see where focus is. The engine focuses each element during the walk and checks its real focused-state style; an element whose focused state shows no outline, no box-shadow, and no style change at all (background, text or border color, underline) has no visible focus indicator.

How to fix#

Keep or restore a visible focus style: never set outline: none or outline: 0 without adding a replacement. Any clearly visible change on focus counts — an outline (2px solid, in a contrasting color), a box-shadow ring, a background or text color change, an underline. Use :focus-visible instead of :focus if mouse users should not see the ring. A transparent or zero-width outline is not an indicator, and the change has to be visible against the surroundings (3:1 under 1.4.11). A global reset such as *:focus { outline: none } is the usual cause — remove it.

Example#

<a href="/" style="outline:none">Home</a>

<a href="/">Home</a>

WCAG success criteria#

2.4.7 Focus Visible — Level AA#

Keyboard focus must have a visible indicator.

Understanding 2.4.7

Standards#

This rule contributes to the following standards:

WCAG AA EN 301 549 Best practice

References#

• WCAG — Focus Visible