WCAG 2.4.7 Focus Visible: Ensure Keyboard Focus Indicators

Last updated: 2026-03-22

Level AA Operable WCAG 2.4.7

What This Criterion Requires

WCAG 2.4.7 requires that any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. When users navigate a webpage using the Tab key or other keyboard commands, the currently focused element must have a visible visual indicator so the user knows where they are on the page. This is typically displayed as an outline, border, or other visual change around the focused element. The default browser focus indicator (usually a blue or dotted outline) satisfies this criterion, but many designers remove it with CSS rules like outline:none or outline:0 without providing a replacement. Custom focus styles are acceptable and often preferred for design consistency, but they must be clearly visible and provide sufficient contrast against the background. This criterion applies to all interactive elements including links, buttons, form inputs, and any element with tabindex. Focus visibility is one of the most fundamental keyboard accessibility requirements.

Why It Matters

Keyboard users who cannot or choose not to use a mouse rely entirely on the focus indicator to know which element is currently selected and will respond to their keyboard input. Without a visible focus indicator, navigating a webpage with a keyboard becomes a guessing game where the user presses Tab repeatedly without knowing where they are. This is equivalent to removing the mouse cursor for mouse users. Sighted keyboard users include people with motor impairments who use switch devices or mouth sticks, users who prefer keyboard navigation for efficiency, and users with temporary disabilities like a broken arm. Power users often prefer keyboard shortcuts, and they also depend on visible focus. When focus indicators are removed for visual aesthetics, an entire category of users is effectively locked out of the website. Providing clear, high-contrast focus indicators is one of the simplest and most impactful accessibility improvements a developer can make.

Common Failures and How to Fix Them

CSS removes focus outline with no replacement

A global CSS rule removes the browser default focus outline on all elements, and no custom focus style is provided as a replacement. Keyboard users cannot see which element has focus.

Inaccessible 
<style>
*:focus {
  outline: none;
}

a:focus,
button:focus,
input:focus {
  outline: 0;
}
</style>
Accessible 
<style>
/* Remove default only when replacing with custom style */
*:focus {
  outline: none;
}
*:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

a:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
  border-radius: 2px;
}

button:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.3);
}
</style>

Focus indicator has insufficient contrast

A custom focus indicator is provided but uses a color that does not have sufficient contrast against the background, making it hard to see for users with low vision.

Inaccessible 
<style>
.nav-link:focus {
  outline: 2px solid #e0e0e0; /* light gray on white background */
}
</style>
<nav style="background: #fff;">
  <a href="/" class="nav-link">Home</a>
  <a href="/about" class="nav-link">About</a>
</nav>
Accessible 
<style>
.nav-link:focus-visible {
  outline: 3px solid #0056b3; /* dark blue on white - high contrast */
  outline-offset: 2px;
}
</style>
<nav style="background: #fff;">
  <a href="/" class="nav-link">Home</a>
  <a href="/about" class="nav-link">About</a>
</nav>

How to Test

  1. Press Tab repeatedly through the entire page and verify that every focusable element has a clearly visible focus indicator.
  2. Check that the focus indicator is visible against the element's background and surrounding content, with sufficient contrast.
  3. Inspect the CSS for rules that set outline:none, outline:0, or outline-color:transparent on focused elements, and verify that replacement focus styles exist.
  4. Test with :focus-visible styles disabled to ensure a fallback focus indicator is present for browsers that do not support :focus-visible.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria