Focus Visible
Tier 1 · The normative floor
Baseline compliance
What the normative text of WCAG 2.2 requires, and nothing more. Only a failure of this tier is a WCAG failure.
The bare minimum
Any keyboard-operable interface has a mode of operation in which the keyboard focus indicator is visible.
Normative text
Verbatim from WCAG 2.2, W3C Recommendation 12 December 2024. Underlined terms are defined below.
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Known failures
These fail this criterion or a related one named in the text. Log them as WCAG failures.
- An author-styled focus indicator below 3:1 against adjacent colors fails 1.4.11 Non-text Contrast: WCAG's definition of state includes focus, and 1.4.11 covers visual information needed to identify states.
Not required by the normative text
Common claims that this criterion does not support. Don't log these as WCAG failures.
- A specific size, color or contrast for the indicator. Size and focused-versus-unfocused contrast are 2.4.13 (AAA). W3C's Understanding document for 1.4.11 does expect author-styled indicators to meet 3:1 against adjacent colors.
- Showing focus on mouse click. Showing it only for keyboard users, as :focus-visible does, is fine.
Definitions used (1)
Glossary definitions are normative. Their notes are informative.
- focus indicator
-
pixels that are changed to visually indicate when a user interface component is in a focused state
Tier 2 · The gap
Usability & user impact
Where content can meet this criterion and still make things harder for people with disabilities. These are not failures of SC 2.4.7, so raise them as usability defects. Known failures, including failures of related criteria, are listed in Tier 1.
A visible indicator, even one that meets 3:1, can be hard to spot if it's thin or close in style to the hover state.
Tier 3 · The golden path
Recommended best practice
The pattern that meets the floor, closes the gap, and avoids audit disputes. A recommendation, not a requirement.
Use a thick, high-contrast outline with an offset, applied consistently through :focus-visible in your design system.
W3C's Understanding document and techniques for SC 2.4.7 ↗ are informative: sufficient techniques show ways to pass, and documented failures show common ways to fail, but neither changes what the criterion requires.
How SC 2.4.7 maps to the WCAG 3 draft
From this site's reviewed map to the WCAG 3 editor's draft. It's an interpretation: W3C has not published a mapping.
No provision in the current draft requires a visible focus indicator as such; the related provisions cover its contrast and the use of the browser default.
Related, not a successor
From WCAG 2.2, section 5.1: “The main content of WCAG 2.2 is normative and defines requirements that impact conformance claims. Introductory material, appendices, sections marked as "non-normative", diagrams, examples, and notes are informative (non-normative). Non-normative material provides advisory information to help interpret the guidelines but does not create requirements that impact a conformance claim.”