Level AASince WCAG 2.0

2.4.7 Focus Visible

Guideline 2.4: Navigable – People can find their way and always know where they are.

What does the rule require?

You can always see which element has keyboard focus. Without a visible focus, using a keyboard is like using a mouse without a pointer.

How to get it right

Never remove outline without a replacement. Design focus on purpose: :focus-visible { outline: 3px solid; outline-offset: 3px; }

Go to the interactive demo

Who benefits most?

Official wording

This page explains the rule in simple words. Only the original W3C text is normative.