Skip to main content
WCAG 2.4.7 Focus Visible (Level AA)
This page demonstrates how to implement visible focus indicators for keyboard navigation.
- Goal: Users know which element has keyboard focus.
- What to do: Ensure each item receiving focus has a visible indicator.
- Why it's important: Without a focus indicator, sighted keyboard users cannot operate the page.
Poor Focus Visibility Examples
Hidden Focus Indicators
Why this fails:
- Focus indicators have been removed
- Keyboard users cannot see their current position
- Violates WCAG 2.4.7 requirements
Good Focus Visibility Examples
Clear Focus Indicators
Why this works:
- Clear visual focus indicators
- High contrast outline
- Sufficient size and spacing
Complex Components
Interactive Card
This card shows focus-within state.
Dark Theme Components
State-Based Focus Indicators
High Contrast Focus
Focus Visibility Best Practices
- Never remove focus indicators completely
- Ensure sufficient color contrast for focus indicators
- Make focus indicators large enough to be visible
- Consider different color schemes and backgrounds
- Use multiple visual cues (outline, shadow, etc.)
- Test focus visibility in different viewport sizes