Focus Visible ensures that as users tab through interactive elements—like links, buttons, and form fields—the focus is always clear and easy to spot, so no one gets lost in the dark.
Who this impacts
- Keyboard users: People who navigate with a keyboard need a visible focus indicator to see where they are on the page at all times.
- People with cognitive impairments: A clear visual cue helps users stay oriented and avoid missing key information or actions.
- Screen reader users: Lots of screen reader users have some vision and can use that to navigate the page visually.
- Everyone: A strong focus indicator improves usability for everyone, especially those who might be temporarily unable to use a mouse.
How to meet Focus Visible
- Implement a visible focus indicator: Add a focus outline, highlight, or border that appears on all interactive elements when they are focused.
- Ensure focus indicators stand out: Use high-contrast colors or thicker outlines to make the focus indicator easy to see, even on busy or colorful backgrounds.
- Test with keyboard-only navigation: Try navigating your site using just the Tab key and confirm that the focus is consistently visible and easy to track.
Practical example
Top tips
- Make it bold: Ensure your focus indicator is prominent enough to be noticed, even on complex backgrounds or with varying color schemes.
- Test with a variety of backgrounds: Ensure the focus indicator is visible on different background colors and images for consistency across the site.
- Keep focus indicators consistent: Use a consistent style for focus indicators to help users know where they are and keep navigation predictable.