2.4.7 Focus Visible (Level AA) — WCAG 2.1
WCAG 2.1 Success Criterion 2.4.7 Focus Visible (Level AA): what it requires, a common e-commerce accessibility failure, and how to fix it.
This is educational technical reference content, not legal advice. It explains what WCAG 2.1 requires and how to meet it — not whether a specific site carries legal risk. Compliance with WCAG, the ADA, or any other accessibility law or standard is a legal determination; consult qualified counsel for legal risk assessment.
WCAG 2.1 guidelines hub → Operable → 2.4.7 Focus Visible
2.4.7 Focus Visible (Level AA)
What it requires: Whatever currently has keyboard focus is visibly indicated — a sighted keyboard user always has to be able to see where they are on the page.
Common failure: A stylesheet includes *:focus { outline: none; } as a global reset to remove the browser’s default focus ring for aesthetic reasons, with no replacement focus style added — every interactive element becomes invisible to keyboard users when focused.
Fix it: Never remove the default focus outline without providing a clearly visible custom replacement that meets 1.4.11’s 3:1 contrast requirement against its surroundings. :focus-visible (rather than :focus) lets you show a custom ring for keyboard users specifically without it appearing on every mouse click, if that’s the design goal.
In 2.4 Navigable: ← 2.4.6 Headings and Labels · 2.4.8 Location →
This is educational technical reference content, not legal advice. It explains what WCAG 2.1 requires and how to meet it — not whether a specific site carries legal risk. Compliance with WCAG, the ADA, or any other accessibility law or standard is a legal determination; consult qualified counsel for legal risk assessment.
This page was drafted with AI assistance and reviewed by a person for accuracy before publication.