WCAG Guideline 2.4.7: Focus Visible Explained
Estimated read time: 6–7 minutes
Guideline 2: Operable
The Operable principle ensures that all users can interact with and control web content, regardless of their abilities. This includes making sure users can always see which element is focused when navigating with a keyboard.
Guideline 2.4: Navigable
Guideline 2.4 focuses on making it easier for users to navigate, find content, and determine where they are. Focus Visible is about ensuring a visible indicator is present when elements receive keyboard focus.
What Is Guideline 2.4.7 Focus Visible?
"Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible."
Guideline 2.4.7 Focus Visible is a Level AA requirement in the Web Content Accessibility Guidelines (WCAG) .
- All interactive elements must show a visible focus indicator when navigated to by keyboard.
- Applies to links, buttons, form fields, menus, and any focusable content.
- The focus indicator must be clearly visible and not removed by custom styles.
This ensures all users can see which element is focused, supporting navigation and accessibility for everyone.
For more, see AccessGuide: Focus Indicator .
Why Does It Matter?
- Inclusivity: Visible focus is essential for keyboard and assistive technology users.
- Legal Compliance: Focus Visible is a Level AA requirement in WCAG 2.1 and 2.2.
- Usability: Prevents confusion and improves navigation for all users.
For more, see W3C’s guidance on focus visible .
What Needs a Visible Focus?
- Forms and input fields
- Navigation menus
- Interactive elements
All must have a visible focus indicator when navigated to by keyboard.
How to Make Focus Visible Accessible
- Ensure focus indicator is always visible
- Use high-contrast, easily seen styles
- Document focus indicator conventions
- Test with keyboard and screen reader users
For more, see the W3C's Focus Visible Techniques .
Common Mistakes to Avoid
- Focus indicator not visible or too subtle
- Focus indicator hidden by custom styles
- Not documenting focus indicator conventions
- Not testing with users who rely on visible focus
Differences Between A, AA, and AAA for Guideline 2.4.7 in WCAG 2.2
- Level A: Not applicable for this guideline.
- Level AA: Requires visible focus indicator for all keyboard operable UI. This is the core requirement for 2.4.7 and is mandatory for AA accessibility.
- Level AAA: For Guideline 2.4.7, there are no additional requirements beyond Level AA in WCAG 2.2. Meeting Level AA for this guideline also satisfies Level AAA.
For more, see the W3C’s official documentation for 2.4.7 Focus Visible .
Quick Checklist
- Focus indicator is always visible
- High-contrast, easily seen styles are used
- Focus indicator conventions are documented
- Tested with keyboard and screen reader users
Summary
Guideline 2.4.7 is essential for helping users navigate your site efficiently. By ensuring visible focus, you support users with disabilities, improve usability, and meet legal requirements. Test your site regularly and make focus visibility a core part of your development process.