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#

Provide a clearly visible :focus (or :focus-visible) style — keep the default outline, or add a custom outline/box-shadow.

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