A focus state is the visual signal that shows which element the keyboard is currently on: a button, a link, a text field. For anyone navigating without a mouse, it is not decoration; it is the cursor. Yet focus states are one of the first things teams strip out because they look “ugly” in the default browser style. This article shows you how to design focus states that are clearly visible, on-brand, and never in the way, so keyboard users can move through your product with confidence.
Why focus states get removed, and why that is a bug
The default focus outline is a plain ring that shows up on mouse clicks too, which looks noisy. So teams write outline: none and forget to add a replacement. The result is an invisible cursor for keyboard users, screen reader users, and anyone with a motor impairment who relies on tabbing. Removing focus without replacing it is an accessibility failure, and it is one of the most common ones on the web.
The mouse-versus-keyboard tension
The real reason teams disliked focus rings is that they appeared after mouse clicks, where they were not needed. Modern browsers solved this: a dedicated selector applies focus styling only when the user is navigating by keyboard, not when they click with a mouse. This means you can show a strong, obvious ring for keyboard users without the ring cluttering the interface for mouse users. There is no longer a good reason to remove focus entirely.
What makes a focus state actually visible
Visibility is about contrast and separation. A focus indicator must stand out from both the element and the background behind it. A thin outline the same color as your border will not do that. Aim for a ring with clear contrast, enough thickness to notice, and a small offset so it does not blend into the element’s own edge.
| Property | Weak | Strong |
| Thickness | 1px hairline | 2 to 3px ring |
| Contrast | Same hue as border | Distinct, high-contrast color |
| Offset | Touching the edge | Small gap so the ring reads clearly |
| Coverage | Only some components | Every interactive element |
A real scenario
A checkout page has a custom-styled “Place order” button. The designer removed the default outline because it clashed with the brand. A keyboard user tabs through the form: name, address, card fields all light up faintly, but when focus reaches the final button, nothing changes visually. The user cannot tell whether they are about to submit or still sitting on the last field. They hesitate, tab again, and accidentally skip the button. The fix took minutes: add a keyboard-only focus ring in a contrasting color with a small offset, applied consistently to every control. Suddenly the whole flow is navigable without a mouse.
Common mistakes and how to fix them
- Removing the outline with no replacement. The classic error. Fix: never use
outline: nonewithout adding a visible custom focus style. - Focus styles only on some components. Inconsistency makes users lose the cursor. Fix: define one focus token and apply it everywhere.
- Low-contrast rings. A subtle glow may vanish on busy backgrounds. Fix: test the ring against your darkest and lightest surfaces.
- Confusing focus with hover. Hover is for the mouse; focus is for the keyboard. Fix: give them distinct treatments so keyboard users get real feedback.
- Broken focus order. If tab order jumps around, even visible focus is confusing. Fix: keep the DOM order logical and avoid arbitrary tabindex values.
A checklist for focus states
- Never remove the outline without a visible replacement.
- Use the keyboard-only focus selector so rings appear on tab, not on click.
- Define one focus style as a shared token across the whole product.
- Give the ring at least 2px thickness and a clear color offset.
- Test the ring against every background it can appear on.
- Keep focus and hover styles visually distinct.
- Tab through every page and confirm the focus order is logical.
- Include custom controls, modals, and menus, not just native buttons.
Conclusion and next step
Focus states are a small detail that decides whether a large group of users can operate your product at all. The good news is that modern browser features let you make them both attractive and accessible with almost no trade-off. Your next step: put the mouse away, tab through your main flow end to end, and note every place the cursor disappears. Fixing those gaps is often a single afternoon of work with an outsized payoff.
FAQ
Is it ever acceptable to remove focus outlines?
Only if you replace them with an equally visible custom style. Removing focus with no replacement breaks keyboard navigation and fails accessibility guidelines.
How do I stop the ring from showing on mouse clicks?
Use the keyboard-focus selector supported by modern browsers, which applies focus styling only when the user navigates with the keyboard, not when they click with a pointer.
What contrast should the focus ring have?
Enough to stand out clearly from both the element and its background. Accessibility guidance treats focus indicators as needing meaningful contrast; test against your real surfaces rather than trusting a subtle glow.
Do custom components need focus styles too?
Yes. Custom dropdowns, tabs, sliders, and modal dialogs all need visible focus and correct keyboard behavior. Native elements give it for free; custom ones do not.
How is focus order different from focus visibility?
Visibility is whether you can see the cursor; order is the sequence the cursor moves through. Both must work. A visible ring that jumps around unpredictably is still confusing.
References
- W3C Web Content Accessibility Guidelines (WCAG) — Focus Visible and Focus Order criteria.
- MDN Web Docs — documentation on the :focus-visible selector.