← Back to Accessalyze

WCAG 2.4.7 Focus Visible

2.4.7 is a Level AA success criterion — legally required. Its failure is extremely common because many CSS resets and design systems globally suppress the browser's default outline to avoid the "ugly blue ring" on click, without replacing it with a custom indicator.

What 2.4.7 Actually Requires

The criterion requires that a focus indicator exists when keyboard focus is present. It doesn't specify how it looks — just that it's visible. This is a relatively low bar that most browser defaults meet. The failure is when focus is made invisible:

/* FAIL — removes all focus indication */
* { outline: none; }
:focus { outline: none; }
a:focus { outline: 0; }
button:focus { box-shadow: none; }

:focus vs :focus-visible

The :focus-visible pseudo-class was designed to solve the "ugly ring on mouse click" problem properly. It shows focus indicators for keyboard navigation but suppresses them for mouse clicks (where they are usually unnecessary).

/* APPROACH 1: Remove default, add custom for keyboard only */
:focus {
  outline: none; /* Removes for mouse clicks */
}
:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

/* APPROACH 2: Let browser decide what to show */
/* (Often the best default — modern browsers handle this well) */

Browser support: :focus-visible is supported in all modern browsers (Chrome 86+, Firefox 85+, Safari 15.4+). For older Safari, a polyfill is available.

WCAG 2.2: Focus Appearance (2.4.13)

WCAG 2.2 added a stronger focus appearance requirement at Level AA:

• The focus indicator must enclose the component
• The indicator's area must be at least (perimeter of component × 2px)
• Contrast between focused and unfocused states must be at least 3:1

In practice: a 3px outline on most UI components meets this requirement comfortably.

Designing a Good Focus Indicator

/* High-contrast focus ring — works on most backgrounds */
:focus-visible {
  outline: 3px solid #2563eb;    /* Blue, 5.08:1 on white */
  outline-offset: 3px;
  border-radius: 4px;             /* Match element's border-radius */
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :focus-visible {
    outline: 3px solid #93c5fd;   /* Light blue, visible on dark */
    outline-offset: 3px;
  }
}

/* Alternate: outline that works on any background color using double ring */
:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #fff;    /* White halo creates contrast on dark bgs too */
}

Focus Indicators for Custom Components

/* Custom button with focus ring matching its style */
.btn-primary:focus-visible {
  outline: none; /* Remove default */
  box-shadow:
    0 0 0 3px #fff,        /* White gap between button and ring */
    0 0 0 6px #2563eb;     /* Blue ring */
}

/* Input focused state */
input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* Link in body text */
a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
  text-decoration: underline;
}

Common Patterns That Hide Focus

• CSS reset files that include outline: none for all elements
• Button components that set :focus { box-shadow: none; outline: none; }
• Link styles that override outline without providing an alternative
• Tailwind's focus:outline-none utility used without focus:ring-* replacement
• Bootstrap's focus-ring overrides that get removed by theming

In Tailwind, always pair focus:outline-none with focus ring utilities:

<button class="focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2">
  Click me
</button>

← Back to Accessalyze · ← Fix Keyboard Navigation Issues