A focus indicator can be accessible and still make the interface harder to use. It happens in the situations when the following question was not asked during the design process: “Can users clearly understand where they are after focus moves?”
Imagine a button that changes from dark blue to light grey when focused - there is a focus state. But the text becomes harder to read, the button looks less like a button and the user may actually have a harder time finding it. So technically, we added focus, but practically, we made the interface worse.
Important facts to keep in mind about the focus state:
The focus indicator itself needs to be visible against its surroundings - a beautiful blue 2px outline isn’t useful if it’s sitting against a blue background.
Focus doesn’t have to replace the component’s existing design. Often, it’s better to add a focus indicator rather than completely change the button, link, or input.
For example:
button:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
}That little outline-offset can make the focused element much easier to spot.
Don’t rely on colour alone.
Changing one shade of blue to another may not give everyone a reliable visual cue. An outline, border, underline, or another visual change gives users something easier to locate.
A focus ring can have good contrast and still be useless.
For example, the focused element might be underneath a sticky header or partially outside the viewport.
Removing outline without replacing it is a problem.
Here’s an example:
*:focus {
outline: none;
}- the browser’s default focus ring “doesn’t match the design”. That’s a design problem to solve, not a reason to remove one of the most important navigation cues.
:focus-visible doesn’t mean “focus is only for keyboard users”
It helps us decide when a prominent focus indicator should be shown based on the user’s interaction.
The goal is to make focus useful. For a keyboard user, the focus indicator is basically a cursor for the interface.
It tells them:
Where am I?
What am I focused on?
What can I do here?
Right questions about the focus state:
✅ Can I immediately find it?
✅ Can I still read the content?
✅ Does it work against different backgrounds?
✅ Does it remain visible when the page scrolls?
✅ What happens at 200% or 400% zoom?
Accessible focus is giving people a reliable sense of where they are in the interface. Sometimes the best focus style is the one that simply makes its current position impossible to miss.
What’s the worst focus state you’ve encountered in a real product?
