Goal
Make keyboard focus clearly visible.
Success Criterion · WCAG 2.4.7
Focus Visible
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Level AAWCAG 2.0Operable2.4 · Navigable
Copy button ready
What to do
Ensure there is a visible focus indicator for all keyboard-focusable components.
Why it matters
Keyboard users need to know where they are on the page to operate controls and avoid mistakes.
Success criterion
What WCAG 2.4.7 requires
Summarized directly from the official Understanding document so teams can quote the requirement accurately.
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Intent
Why WCAG created this requirement
- Visible focus is essential for keyboard-only operation.
- Custom styling must not hide focus; replace default outlines with accessible alternatives.
- Focus visibility must work across themes and component states.
Benefits
Who gains when you pass
- Keyboard-only users can track where they are and operate the UI confidently.
- Low vision users can locate focus while zoomed or using magnification.
- Users with motor impairments can recover if they tab past the intended control.
Why it matters
User impact when this criterion fails
Summaries drawn from the Understanding document help you socialize impact statements with product stakeholders.
Users can “lose” focus position and be unable to continue.
Accidental activation happens when users can’t see which control will trigger.
Forms and menus become frustrating or impossible to use via keyboard.
Overview
When a user tabs through the interface, it must be visually obvious which element currently has focus. Avoid removing outlines unless you replace them with an equally visible focus style.
- Avoid `outline: none` unless you add a strong replacement.
- Use `:focus-visible` to show focus primarily for keyboard interaction when appropriate.
- Ensure focus indicator has sufficient contrast (see also 1.4.11 and 2.4.13).
- Test focus visibility on buttons, links, inputs, custom widgets, and within modals.
Reference: All summaries and highlights originate from Understanding WCAG 2.4.7 and the W3C quick reference.
Fast facts
- Conformance level
- Level AA
- WCAG version introduced
- WCAG 2.0
- Principle
- Operable
- Guideline
- 2.4 · Navigable
Examples
Make success tangible for teams
Share pass/fail snapshots to coach designers, engineers, QA, and content authors.
Link focus
Pass
Focused link shows a visible outline or ring clearly distinct from hover state.
Fail
Links have `outline: none` and no replacement focus styling.
Button focus
Pass
Button shows a 2px ring with offset that remains visible on gradients.
Fail
Focus indicator is the same color as the button background and effectively invisible.
Custom control
Pass
Custom toggle shows focus on the interactive element and is clearly visible.
Fail
Focus goes to an inner element with no visible indication.
Evidence to keep
Document conformance decisions
Capture artifacts for VPATs, procurement reviews, and regression testing.
- Document standard focus styles (ring size, color, offset) for the component system.
- Capture screenshots of focus states on core components for regression reference.
Official resources
Deep dives and supporting material
Keep these links handy when writing acceptance criteria or responding to audits.
Understanding 2.4.7
Official W3C interpretation, techniques, and intent for Focus Visible.
Quick Reference 2.4.7
Filterable list of sufficient techniques and failures.
Technique G149
Providing a visible focus indicator.
Technique C15
Using CSS to change presentation of a user interface component when it receives focus.
Implementation checklist
Capture progress and blockers
- Audit CSS for removed focus outlines and replace with visible focus styles.
- Apply consistent focus rings across components (buttons, links, inputs, custom widgets).
- Ensure focus styling is not clipped by overflow-hidden containers.
- Verify focus indicators are visible in light and dark themes.
- Ensure focus remains visible on hover/active/disabled states (when focusable).
Testing ideas
Prove conformance with evidence
- Tab through the page and confirm focus is always visible.
- Test in light and dark modes and at high zoom.
- Verify custom widgets show focus on the correct element.
- Check focus indicators are not obscured or clipped by layout containers.
Related success criteria
More from Navigable (2.4)
WCAG 2.4.1Bypass BlocksLevel AWCAG 2.4.2Page TitledLevel AWCAG 2.4.3Focus OrderLevel AWCAG 2.4.4Link Purpose (In Context)Level AWCAG 2.4.5Multiple WaysLevel AAWCAG 2.4.6Headings and LabelsLevel AAWCAG 2.4.8LocationLevel AAAWCAG 2.4.9Link Purpose (Link Only)Level AAAWCAG 2.4.10Section HeadingsLevel AAAWCAG 2.4.11Focus Not Obscured (Minimum)Level AAWCAG 2.4.12Focus Not Obscured (Enhanced)Level AAAWCAG 2.4.13Focus AppearanceLevel AAA