Focus indicators: why invisible outlines hurt real users
Short answer: Visible focus indicators show which element is active—removing outlines for “clean design” strands keyboard and switch users.
Customise focus styles, do not delete them.
What good looks like
- 2px+ contrast ring that survives on images and dark headers.
- Consistent across components—buttons, links, form fields.
- :focus-visible patterns to reduce mouse-user noise while preserving keyboard cues.
Brand cohesion
Use brand colours that still meet contrast against adjacent backgrounds—designers can own this with tokens.
Testing
Check focus in high-contrast modes and zoomed layouts where outlines clip.
Frequently asked questions
Can we show focus only on keyboard?
Often yes via :focus-visible—verify across browsers you support.
Do carousels need special focus?
Yes—pausing, announcing slide changes accessibly, and not trapping users.