What are visual focus indicators?
Focus indicators are visual cues, like borders or outlines, that show which element on a page is currently selected or “in focus.” These are essential for people navigating with a keyboard, as they provide clear feedback on the active element.
Focus indicators typically appear on buttons, links, form fields, and menus and are only visible for keyboard navigators.
Why focus indicators are important
- Improves navigation for keyboard users – People who rely on keyboard navigation depend on focus indicators to know where they are on the page.
- Enhances user experience – They help people navigate complex pages more easily, especially on pages with many interactive elements.
- Ensures compliance – WCAG and accessibility laws require visible focus indicators, and non-compliance can lead to legal risks and harm your brand’s reputation.
- Aids cognitive accessibility – Focus indicators give people with cognitive disabilities a visual guide through interactions, reducing confusion and improving usability.
Best practices for focus indicators
Make focus indicators clearly visible
Focus indicators should be obvious and easy to see. See WCAG 2.4.7 Focus Visible for more information.
- High contrast – Ensure the focus indicator stands out against both the background and the element itself. For instance, a white or yellow outline works well on a dark background.
- Distinct styling – Use a solid or dashed outline, glow, or color change to make the focus indicator noticeable and distinct from the element’s default state.
Keep focus indicators consistent
Consistency helps users know what to expect.
- Use the same style – Apply a consistent focus indicator style across all interactive elements.
- Avoid hidden indicators – Make sure focus indicators are always visible and don’t get hidden behind other elements, especially in complex layouts.
Don’t rely solely on browser defaults
Default browser focus indicators are often insufficient for accessibility.
- Enhance with CSS – Use the
:focuspseudo-class to customize focus indicators for better visibility. - Never remove focus styles – Avoid removing focus indicators entirely, as this makes your site unusable for keyboard-only users.
Test focus indicators in real-world scenarios
Testing ensures your focus indicators are effective.
- Navigate with a keyboard – Regularly test your design by navigating with the
Tab,Shift+Tab, andEnterkeys to verify focus indicators are clear and functional. - Gather user feedback – If possible, get input from users with disabilities to see how well they can follow your site’s focus indicators.
Include focus indicators on all interactive elements
Make sure all interactive elements have focus indicators, not just links and buttons.
- Form elements and controls – Input fields, checkboxes, radio buttons, and dropdowns should have visible focus indicators.
- Custom components – For elements like sliders, carousels, or modals, ensure focus indicators are just as clear as on standard HTML elements.
Examples of effective focus indicators
- Solid or dashed outlines – A visible outline around focused elements, sometimes paired with a color change, enhances visibility.
- Thicker borders on focus – Increasing the border thickness when an element is in focus can improve visibility, especially on thin-bordered elements.