Missing or Hidden Focus Indicators

Overview

Keyboard users must be able to see which element is focused. Removing the browser's default outline without a replacement is a common and serious barrier.

The Problem

This pattern is inaccessible — avoid it.

/* Hides the focus ring globally — never do this */
* { outline: none; }
button:focus { outline: none; }

The Fix

Use this accessible pattern instead.

/* Custom focus style that's highly visible */
:focus-visible {
  outline: 3px solid #005FCC;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove outline only for mouse users, keep for keyboard */
:focus:not(:focus-visible) { outline: none; }

Step-by-step

1. 1

   Remove any CSS rule that sets outline: none or outline: 0 without a replacement.

2. 2

   Use :focus-visible (not :focus) to target keyboard focus only.

3. 3

   Ensure the focus indicator has at least 3:1 contrast against adjacent colors (WCAG 2.4.11, Level AA).

4. 4

   Test by tabbing through your page — every interactive element should show a clear ring.

Framework Notes

How to apply this fix in your stack.

/* Tailwind — add to your global CSS */
@layer base {
  :focus-visible { @apply outline-2 outline-offset-2 outline-blue-600; }
}

FAQ