Level AAWCAG 2.0

2.4.7 Focus Visible

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Last reviewed: September 9, 2026

Understanding 2.4.7

The purpose of this criterion is to help a person know which element has the keyboard focus. Without a visible focus indicator, a keyboard user will not know where they are on the page and will be unable to interact with it effectively.

How to Meet It

Ensure that your CSS does not remove the default focus outline (e.g., `outline: none`) without providing a suitable replacement. Use the `:focus-visible` pseudo-class to style the focus indicator specifically for keyboard navigation.

Code Examples

INCORRECT

a:focus, button:focus { outline: none; } /* Removes focus indicator completely */

CORRECT

a:focus-visible, button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } /* Provides strong custom indicator */

Frequently Asked Questions

Why should I use :focus-visible instead of :focus?

The :focus pseudo-class applies styles whenever an element receives focus, including via mouse clicks. This often leads to ugly outlines when a user clicks a button, prompting designers to remove the outline entirely. :focus-visible only applies the style when the browser determines it's necessary (e.g., when navigating via keyboard).

Related Success Criteria

2.4.1 Bypass Blocks 2.4.2 Page Titled 2.4.3 Focus Order 2.4.4 Link Purpose (In Context)

Quick Facts

Criterion2.4.7
LevelAA
IntroducedWCAG 2.0

Automate Compliance

AccessiSight automatically scans and identifies 2.4.7 issues in your codebase.

Try Scanner Free