Focus Indicators: What Actually Works
The visible outline or highlight that shows which link, button or field currently has keyboard focus, so keyboard users can see where they are on the page.
Priya Raghunathan
The key figures
- WCAG 2.4.7 Focus Visible, AA
- keyboard focus must be visible
- WCAG 2.4.11 Focus Not Obscured Minimum, AA
- the focused element must not be entirely hidden by other content
- WCAG 2.4.13 Focus Appearance, AAA
- an indicator at least as large as a 2 CSS pixel perimeter with 3:1 contrast against its unfocused state
- CSS :focus-visible
- shows focus styles for keyboard use without showing them on mouse clicks
Why this is worth getting right
Without a visible focus indicator, anyone navigating by keyboard is effectively working blind, and removing the browser default is one of the most common accessibility failures.
Do this, not that
Do
- Design a focus style for every interactive component
- Use :focus-visible rather than removing outlines
- Check contrast of the focus style on every background color
- Make sure sticky headers and banners never cover the focused element
- Tab through each template before release
Don’t
- outline: none with no replacement
- Focus styles that rely on a subtle color change alone
- Indicators that disappear against brand-colored sections
- Custom components that never receive focus at all
When to bring in help
Our advice Bring in help when keyboard users report getting lost, or when an audit finds focus problems across a component library.
Where this comes from
- W3C Web Accessibility Initiative — Understanding SC 2.4.7 Focus Visible
- W3C Web Accessibility Initiative — Understanding SC 2.4.11 Focus Not Obscured (Minimum)
- MDN Web Docs — :focus-visible
The figures and practices above come from the sources listed.
Working on something like this?
We take on UI & UX Design work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
