Focus Visible

What it asks

Whenever any interactive element receives keyboard focus, the browser — or the page’s CSS — must render a visible indicator showing which element is focused. The SC doesn’t dictate what the indicator looks like; that’s 2.4.13’s job at AAA. It only requires that something is visible. The classic failure is *:focus { outline: none; } with no replacement.

This SC applies to every focusable thing: links, buttons, form inputs, custom widgets, iframes, anything with tabindex. It applies whether the user got there via Tab, Shift+Tab, or a programmatic focus call.

How to meet it

• Never write outline: none (or outline: 0) without an immediate replacement. Use :focus-visible to scope your custom ring to keyboard users only if you want to suppress it on mouse click.
• Provide a focus style with enough contrast and thickness to be obvious: a 2px solid ring at 3:1 contrast against the adjacent background is the conservative baseline.
• For light controls on a light background, use a dark ring (or vice versa). A grey ring on grey hover state is the classic invisibility trap.
• Custom widgets (combobox, listbox, menu) must move focus to the active option and render a visible indicator on it.
• Test by tabbing through the entire page from the URL bar. Every stop must be obvious without squinting.

Common failures

• Global reset: *:focus { outline: none; } in the base CSS, never re-added.
• Component libraries that ship with a 1px low-contrast ring matching the brand colour against a hero gradient — invisible in practice.
• Focus indicator hidden behind a sticky header on scroll (see 2.4.11 — same root cause, different SC).
• Buttons that change background colour on :hover but not on :focus, so keyboard users get no signal at all.
• Custom dropdowns where focus moves to a hidden offscreen <li> and nothing changes visually.
• Designers replacing the ring with a tiny shadow that’s invisible on busy backgrounds.

How :focus-visible fits in

Browsers expose :focus-visible to distinguish keyboard focus from mouse focus. Pattern:

:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

This keeps mouse clicks clean and gives keyboard users an indicator. Safe to ship in all modern browsers as of 2026.

Why it matters

Focus Visible is the single most-cited SC in keyboard accessibility audits — and arguably the highest-impact one. A site that fails 2.4.7 is unusable by keyboard, even if every other SC passes. Users with motor disabilities, vision-impaired users running magnifiers, and users with hand injuries all lose access. Mobile keyboard users (external Bluetooth keyboards on tablets) hit the same wall. Fixing it is usually a single CSS rule, which makes the persistence of the failure across the web all the more remarkable.