How to Fix Invisible Focus Indicator WCAG 2.2

Why this matters

Keyboard users rely entirely on the focus indicator to know where they are on a page. Removing it is like turning off the mouse cursor for mouse users. WCAG 2.2 introduced stricter focus visibility requirements with Success Criterion 2.4.11 (Level AA).

Code examples

/* Common mistake — removes all focus indicators */
* { outline: none; }
a:focus { outline: 0; }
button:focus { outline: none; }

/* Correct — custom focus style that is clearly visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Use :focus-visible not :focus to avoid showing
   outline on mouse clicks */

How to fix it — step by step

1. 1
   Never use outline:none or outline:0 globally
2. 2
   Use :focus-visible instead of :focus — it only shows for keyboard navigation, not mouse clicks
3. 3
   The focus indicator must have at least 3:1 contrast against adjacent colors
4. 4
   Make the focus outline at least 2px thick — 3px is better
5. 5
   Test by tabbing through your entire page and confirming every interactive element shows a focus style
6. 6
   In WCAG 2.2, the minimum focus indicator area must be at least as large as a 2px perimeter of the element

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.