All WCAG criteria
WCAG 2.4.7 · OperableLevel AA
2.4.7Focus Visible
Keyboard focus indicator must be visible.
Common failures
Patterns that fail this criterion.
- 01`outline: none` applied globally without a replacement
- 02Custom focus ring with insufficient contrast against the background
- 03Focus visible on some elements but missing on others (cards, custom buttons)
How to test
Testing approach: semi automated.
axe-core detects `outline: 0` and `outline: none`. Manual confirms quality of any custom replacement.
axe-core rules
focus-order-semanticsHow to fix
Remediation steps.
- 1
Default browser outline OK
Honest answer: the default focus ring is usable. Most of the time, leave it.
- 2
If you replace it
Use `:focus-visible` (not `:focus`) to avoid mouse-clicks triggering it. ≥2px width. ≥3:1 contrast against the element AND the page.
- 3
Test every focusable element
Buttons, links, inputs, custom widgets, cards — every focusable thing.
Scan for WCAG 2.4.7 on your site
Find every violation in 42 seconds.
AccessProof runs axe-core 4.9.1 against your site and flags every WCAG criterion with the offending element selector. WCAG 2.4.7 is one of 49 criteria we check on every scan.
All 50 WCAG 2.1 Level A + AA success criteria explained.
View the full checklist