acc

How to fix: Focus indicator (WCAG 2.4.7 AA)

Why this matters

outline:none without a :focus-visible replacement removes the only visual feedback keyboard users have to track where they are on the page. WCAG 2.4.7 Level AA requires a visible focus indicator. Designers hate the default — solution is to replace it, not remove.

Background

outline:none without a replacement removes the only visual feedback keyboard users have. Replace it with :focus-visible (matches keyboard focus only, not mouse) for the best of both.

References

WCAG 2.1 SC 2.4.7 Focus Visible (AA) · :focus-visible pseudo-class

How to fix

Code snippet for each stack we cover. Pick the one matching your server / framework.

nginx

No server config — CSS change.

apache

Same.

cloudflare

Same.

wordpress

Find your theme's CSS for outline:none. Add: *:focus-visible { outline: 2px solid var(--focus-color, #2563eb); outline-offset: 2px; }

flask

Same — add the :focus-visible override to your base CSS.

express

Same.

rails

Same.

Verify it's working

Tab through your page. Every focusable element should show a clear visual focus indicator.

Want to know if your site has this issue?

Run a free 53-check audit — security, GDPR, NIS2, and technical SEO.

Audit my site →