Elements in sequential focus order must have a visible focus indicator.

Every element that can receive keyboard focus through sequential navigation (such as links, buttons, and form inputs) must display a visible change in appearance when focused. This visual change is how keyboard users know where they are on a page. Without it, navigating by keyboard is like moving a mouse cursor that is invisible.

Keyboard-only users, who may have motor disabilities that prevent mouse use, rely entirely on this focus indicator to track their position as they press Tab through a page. People with low vision who use a keyboard alongside screen magnification also depend on visible focus to orient themselves within the magnified viewport. Removing or hiding the default browser focus outline without providing a replacement leaves these users unable to determine which element is active.

This rule maps to WCAG 2.4.7 Focus Visible (Level AA), which requires that any keyboard-operable user interface has a mode of operation where the keyboard focus indicator is visible. Browsers already provide a default focus style (typically a colored outline) for interactive elements. The most common way this requirement is violated is through CSS that removes the outline, such as outline: none or outline: 0, applied to focused elements without substituting any other visual cue.

How to fix it

If the default browser focus outline has been removed, restore it or provide an alternative that produces a visible change when an element receives focus. Options include:

• Remove any outline: none or outline: 0 declarations on :focus selectors. The browser's default outline will then apply.
• Use the :focus or :focus-visible pseudo-class to apply a custom style, such as an outline, border, box shadow, or background color change.
• Use :focus-visible if the goal is to show a focus ring only for keyboard navigation and not for mouse clicks. All major browsers support this pseudo-class.

The focus indicator must produce at least one pixel of visible color change somewhere in or near the element. In practice, a single-pixel change at the far edge of the page would technically pass WCAG 2.4.7 but would still be unusable. WCAG 2.2 added Success Criterion 2.4.11 (Focus Appearance), which specifies minimum size and contrast requirements for focus indicators. Designing a clearly visible indicator from the start avoids problems with both criteria.

Make sure the focus indicator has sufficient contrast against the surrounding background. A thin light gray outline on a white background, while technically present, is hard to see for many users.

Examples

Incorrect: focus outline removed with no replacement

This CSS removes the browser's default focus outline from all elements. A keyboard user will see no visual change when tabbing through the page.

<style>
  a:focus {
    outline: none;
  }
</style>
<a href="/about">About</a>
<a href="/contact">Contact</a>

Incorrect: outline removed on a button with no alternative

<style>
  button:focus {
    outline: 0;
  }
</style>
<button type="submit">Submit</button>

Correct: default browser focus outline preserved

When no CSS overrides the default focus style, the browser draws its own outline. This is the simplest way to comply.

<a href="/about">About</a>
<a href="/contact">Contact</a>

Correct: custom focus style replaces the default outline

The default outline is removed, but a custom box shadow provides a clearly visible focus indicator.

<style>
  a:focus {
    outline: none;
    box-shadow: 0 0 0 3px #1a73e8;
    border-radius: 2px;
  }
</style>
<a href="/about">About</a>
<a href="/contact">Contact</a>

Correct: using :focus-visible for keyboard-only focus styling

The :focus-visible pseudo-class applies the focus indicator only when the browser determines that focus should be visibly indicated, which typically means keyboard navigation rather than mouse clicks.

<style>
  button:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
  }
</style>
<button type="submit">Submit</button>

Correct: background color change as a focus indicator

A visible background color shift on focus is an acceptable alternative to an outline, as long as the color change is perceivable.

<style>
  a:focus {
    outline: none;
    background-color: #fffbcc;
  }
</style>
<a href="/about">About</a>

Learn more:

W3C Reference

Understanding Success Criterion 2.4.7: Focus Visible

→

W3C Reference

Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum)

→

web.dev Article

WebAIM: Keyboard Accessibility

→