Focused element has no visible focus indicator

What’s wrong

An interactive element removes the browser’s default focus outline with outline: none or outline: 0 and provides no replacement focus style.

Why it matters

Keyboard users — including people with motor disabilities, power users, and anyone navigating without a mouse — rely on the focus indicator to know where they are on a page. Without it, they are navigating blind. This is one of the most common and highest-impact accessibility failures.

How to fix it

Never use outline: none without providing a replacement. Use a clearly visible custom focus style instead.

* {
  outline: none;
}
button:focus {
  outline: 0;
}

:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
  border-radius: 2px;
}

button:focus:not(:focus-visible) {
  outline: none;
}
button:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

Use :focus-visible instead of :focus to show the indicator only for keyboard navigation, not mouse clicks.

Learn more

• WCAG Understanding 2.4.7
• MDN: :focus-visible