Missing or hidden focus indicators.

The problem

A keyboard user’s focus indicator is their cursor—the only way to know where they are on the page. A common “design polish” step is * { outline: none }, which silently removes it and strands keyboard users. WCAG 2.4.7 requires a visible focus indicator, 1.4.11 requires it to have at least 3:1 contrast, 2.4.11 (new in WCAG 2.2, Level AA) requires that it is not entirely hidden by sticky headers or overlays, and 2.4.13 Focus Appearance (new in WCAG 2.2, Level AAA) adds minimum size and contrast targets. Keeping a strong focus style is one of the cheapest, highest-impact accessibility wins you can ship.

The fix

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

/* 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. 1Remove any CSS rule that sets outline: none or outline: 0 without a replacement.
2. 2Use :focus-visible (not :focus) to target keyboard focus only.
3. 3Ensure the focus indicator has at least 3:1 contrast against adjacent colors (WCAG 1.4.11, Level AA; see also 2.4.13 Focus Appearance, Level AAA).
4. 4Test by tabbing through your page — every interactive element should show a clear ring.

Common mistakes

• ×Removing the default outline globally with no replacement.
• ×Using :focus instead of :focus-visible, so mouse clicks show an unwanted ring.
• ×A focus style with too little contrast against the background.
• ×Custom components that never receive or show focus at all.

How to test for it

• Tab through every interactive element—each must show a clear, high-contrast indicator.
• Check the indicator has at least 3:1 contrast against adjacent colors (WCAG 1.4.11; 2.4.13 Focus Appearance at Level AAA sets a stricter size and contrast target).
• Search your CSS for outline:none / outline:0 and confirm each has a replacement.

In your framework

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

Questions