2.4.7 Focus Visible

What this criterion requires

Any keyboard-operable interface must show a visible focus indicator, so users can see where they are.

Who it helps

Sighted keyboard users - without the indicator the keyboard is unusable.

Example: fails vs passes

*:focus { outline: none; }

:focus-visible { outline: 3px solid #00c0a8; outline-offset: 2px; }

Never remove the outline without a stronger replacement. Test every interactive element by tabbing.

How to meet and fix it

• Never use outline:none without an equal-or-better replacement
• Design a branded focus style with 3:1 contrast (see 1.4.11) and test every control

Common failures auditors find

• Global CSS resets that remove outlines
• Focus styles present for links but missing on custom components

Automated scanning catches a share of these instantly - run a free check - and a manual audit covers the judgement calls a tool cannot make.

Last updated 12 August 2026. Reviewed by the EqualWeb accessibility team.