Skip to lesson content
WCAG 2.4.7 · Level AAEasy5 min readKeyboard

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.

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, and 2.4.11 (new in WCAG 2.2) adds minimum size and contrast requirements. Keeping a strong focus style is one of the cheapest, highest-impact accessibility wins you can ship.

WCAG Criterion:2.4.7
Conformance Level:Level AA
Difficulty:Easy
Time to fix:~5 min
Category:Keyboard

The Problem

This pattern is inaccessible — avoid it.

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

The Fix

Use this accessible pattern instead.

[ CORRECT ]
/* 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. Remove any CSS rule that sets outline: none or outline: 0 without a replacement.

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

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

  4. Test 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 2.4.11).

  • Search your CSS for outline:none / outline:0 and confirm each has a replacement.

Framework Notes

How to apply this fix in your stack.

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

FAQ

Related lessons