How to get focus indicators right
It comes up on almost every project, usually later than it should. The short answer to focus indicators is that it is mostly a sequence of small decisions, not one big one.
Most of it is correctness rather than charity: use the right element and much of it happens automatically. Doing this properly once is usually cheaper than doing it approximately three times.
Why it matters
Removing the focus ring breaks the site for keyboard users. There is a version of this that is over-engineered, and it is worth avoiding. Budget a little time for it every quarter and it never becomes a project of its own.
The steps
- Establish what you have today before changing anything
- A custom indicator is fine, no indicator is not
- Focus-visible gives you the best of both
- Write down the decision so the next person does not re-litigate it
Focus-visible gives you the best of both. The reasoning matters more than the rule, because the rule has exceptions. Doing this properly once is usually cheaper than doing it approximately three times.
What to do next
The short version
The cost of retrofitting accessibility is several times the cost of building it in. Three things worth confirming about focus indicators before you move on:
- Someone can say what the current setup is without going to look
- Focus-visible gives you the best of both — and you know whether that is true here
- There is a way to tell whether the last change to this helped
If any of that sounds like a description of your current setup, it is fixable.