2.4.7 Focus Visible

What this rule means

WCAG 2.4.7 requires that when users navigate with a keyboard, the currently focused element must have a visible focus indicator. This is typically a visible outline, border change, or highlight that clearly shows which element has keyboard focus. Without this visual cue, keyboard users are navigating blind.

The focus indicator must be visible in all states — not just on some elements or some pages. It applies to links, buttons, form fields, custom components, and any other focusable element. The default browser focus outline satisfies this requirement, but many sites remove it without providing a replacement.

Why it matters

Keyboard users rely on the focus indicator the way mouse users rely on the cursor. Without a visible focus indicator, pressing Tab becomes a guessing game — users cannot tell which element is selected, cannot predict what will happen when they press Enter, and cannot efficiently navigate the page. This makes websites effectively unusable for keyboard-only users.

Visible focus is critical for users with motor impairments, low vision, and cognitive disabilities. It is also important for power users who prefer keyboard navigation for speed and efficiency. Removing the focus outline without replacement is one of the most common and most impactful accessibility failures on the web.

Related axe-core rules

• focus-visible — Checks that interactive elements have a visible focus indicator when focused via keyboard.

How to test

1. Disconnect your mouse and navigate through the entire page using only Tab and Shift+Tab.
2. Verify that every interactive element (links, buttons, inputs, selects, custom widgets) shows a clearly visible focus indicator when it receives focus.
3. Check that the focus indicator has sufficient contrast against its background — at least 3:1 contrast ratio.
4. Test in different browsers, as focus styles may vary.

• Look for CSS rules like outline: none, outline: 0, or *:focus { outline: none } in the codebase — these are red flags.
• Verify that custom focus styles are at least as visible as the default browser outline.

How to fix

Never remove the default focus outline without providing a visible alternative. Use the :focus-visible pseudo-class to show focus indicators only for keyboard navigation.

Focus outline CSS — best practices

/* NEVER do this without a replacement */
*:focus {
  outline: none; /* Removes focus indicator for ALL users */
}

/* Good: Custom focus style for keyboard users only */
:focus-visible {
  outline: 3px solid #4a90d9;
  outline-offset: 2px;
}

/* Good: Hide outline for mouse clicks, show for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* Good: High-contrast focus ring */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
  border-radius: 2px;
}

Focus styles for dark and light themes

/* Light theme focus */
:focus-visible {
  outline: 3px solid #0051a8;
  outline-offset: 2px;
}

/* Dark theme focus */
@media (prefers-color-scheme: dark) {
  :focus-visible {
    outline: 3px solid #6bb3ff;
    outline-offset: 2px;
  }
}

/* Double-ring technique for any background */
:focus-visible {
  outline: 3px solid #ffffff;
  box-shadow: 0 0 0 6px #000000;
}

Focus indicator on custom components

<!-- Custom card that is focusable -->
<div role="button" tabindex="0" class="card">
  <h3>Audit Report</h3>
  <p>View your latest accessibility audit results</p>
</div>

<style>
.card:focus-visible {
  outline: 3px solid #4a90d9;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.3);
}
</style>

Common mistakes

• Using outline: none or outline: 0 globally without providing any alternative focus indicator.
• Providing a focus indicator with insufficient contrast — it must have at least 3:1 contrast against adjacent colors.
• Using only a color change as the focus indicator — color alone cannot be the only visual distinction for colorblind users.
• Custom components (divs with role="button", custom dropdowns) that have no focus styles at all.
• Focus indicators that are too subtle — a 1px dotted line may not be visible enough, especially for low-vision users.
• Removing focus outlines "because the designer said so" — accessibility is a functional requirement, not optional styling.