2.4.7 Focus Visible

In Plain Language

When a keyboard user navigates through interactive elements (links, buttons, form fields), each element must have a visible focus indicator -- a visual outline or highlight showing which element currently has keyboard focus. Without it, keyboard users are navigating blind.

The most common violation is using outline: none or outline: 0 in CSS to remove the default browser focus ring without providing a replacement.

Why It Matters

Keyboard users rely on the focus indicator to know where they are on the page -- without it, pressing Enter or Space might activate the wrong element.
People with motor disabilities who use switch devices or alternative keyboards depend on visible focus to navigate efficiently.
Many CSS resets and frameworks include outline: none on all elements, silently removing focus visibility across an entire site.
The :focus-visible pseudo-class lets you show focus rings only for keyboard navigation, avoiding the visual clutter that leads developers to remove outlines in the first place.

Examples

Do: Clear, high-contrast focus ring

/* Show focus ring only for keyboard navigation */
a:focus-visible {
  outline: 3px solid rgba(26, 107, 90, 0.5);
  outline-offset: 2px;
}

/* Do NOT do this without a replacement: */
/* a:focus { outline: none; } */

Don't: Remove outline with no replacement

How to Fix It

Never remove outline without a replacement. If you use outline: none, you must provide an alternative visible indicator such as a box shadow, border, or background color change.
Use :focus-visible instead of :focus. This pseudo-class only matches when the browser determines the user is navigating with a keyboard, so mouse users won't see focus rings on clicked elements.
Ensure sufficient contrast for focus indicators. WCAG 2.4.11 (AA) recommends a minimum 3:1 contrast ratio between the focus indicator and adjacent colors.
Audit your CSS resets. Search your stylesheets for outline: none and outline: 0. If you find them applied globally, replace them with :focus-visible rules.
Test with keyboard only. Unplug your mouse and navigate your site using only Tab, Shift+Tab, Enter, and Space. If you ever lose track of where focus is, you have a problem.