Ensure focus indicators are visible for keyboard users

WCAG 2.4.7
Focus Visible

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Never remove focus outlines — style them instead.

Why this matters and how to fix it

Why this matters

Keyboard users depend on a visible focus indicator to understand where they are on the page. Without a clear focus outline or highlight, users can lose their position and become unable to navigate or complete tasks.

How to fix this issue

Ensure every interactive element shows a clear focus style. Do not remove native focus outlines. If customizing, use :focus-visible with high-contrast outlines, borders, or shadows that are visually obvious.

Automated detection · Manual review recommended

Developer guidance

Many UI kits remove focus outlines for visual style. Always replace them with a custom outline or highlight that has sufficient contrast (at least 3:1). Test navigation using only the keyboard (Tab / Shift+Tab).

Code examples

Incorrect Implementation

button, a, input, select {
  outline: none;
}

<button>Continue</button>

Correct Implementation

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

<button>Continue</button>

Real-World Examples

Before

<a class="link" href="/next">Next</a> <!-- CSS removed outline, so there's no visible focus -->

After

<a class="link" href="/next" style="outline: 2px solid #000; outline-offset: 2px;">Next</a>

CSS Example (Guidance)

/* Use :focus-visible to enhance focus for keyboard users */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid #2563eb; /* Blue outline */
  outline-offset: 2px;
}

/* Avoid removing native outlines globally */
*:focus {
  outline: none; /* Only if replaced by a visible alternative */
}

Manual testing

  1. 1. Use the keyboard only (no mouse).
  2. 2. Press Tab repeatedly to move through the interface.
  3. 3. Watch for a visible indicator (outline, border, background change, etc.) as focus moves.
  4. 4. Confirm the indicator is easy to see and meets a 3:1 contrast ratio.
  5. 5. If any interactive element receives focus with no visible change, this issue applies.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance