2.4 Navigable · Operable
WCAG 2.4.7 Focus Visible
Level AA
Any keyboard-operable element must have a visible focus indicator when it receives focus. Don't suppress the browser default unless you're replacing it with something at least as clear.
Common failures
- `*:focus { outline: none }` strips focus indicators globally.
- Custom focus styles use too-subtle colours that fail 1.4.11 contrast.
How to fix
- Keep the browser default outline, or replace with a visible custom ring.
- Use `:focus-visible` so the ring shows for keyboard but not mouse focus.
- Verify focus contrast against every background the element appears on.
Related criteria
- WCAG 1.4.11 Non-text Contrast Level AA
- WCAG 2.1.1 Keyboard Level A
- WCAG 2.4.3 Focus Order Level A