Like if they have chosen their highlight color as the focus color, so when you tab to the call to action button, you can’t tell because it just blends in. Or the blue works great against a white background, but the footer has reversed the color scheme.
Focus Appearance attempts to address this by setting some minimum standards, but the requirements are often just not enough. A clearly visible focus is essential for accessible navigation, so we recommend doing more than these minimums to ensure a better user experience.
Who this impacts
- Keyboard users: People who navigate using a keyboard rely on visible focus indicators to understand their current position on the page.
- People with low vision: A well-defined, high-contrast focus indicator helps users with limited vision stay oriented and engaged with the content.
- Everyone: A prominent focus indicator improves usability for everyone, especially those who might be temporarily unable to use a mouse.
How to meet Focus Appearance
- Use high-contrast focus indicators: Ensure that the focus indicator is clearly visible against any background colors or images.
- Maintain a minimum focus thickness: Use a thick enough outline or border on focused elements to make the indicator noticeable without being distracting. WCAG sets this as the equivalent of a 2px border around the element, but you should do more.
- Check color contrast: Make sure the focus indicator contrasts well against the background, making it visible for users with different levels of vision.
Practical example
Top tips
- Prioritize contrast and thickness: Use high-contrast colors and a sufficiently thick outline to make focus indicators easy to see.
- Test on various backgrounds: Ensure focus indicators remain visible across different background colors or images.
- Stay consistent: Use a consistent focus appearance style throughout the site to help users track their position with ease.