Focus indicators: a practical guide

It comes up on almost every project, usually later than it should. This guide covers what focus indicators actually involves, where it usually goes wrong, and how to tell whether yours is in reasonable shape.

The cost of retrofitting accessibility is several times the cost of building it in. Nothing below assumes a large team or a large budget — most of it is a decision somebody has to make and then write down.

What it costs to ignore

Removing the focus ring breaks the site for keyboard users. The teams that handle this well are rarely the ones with the biggest budgets. The practical test is whether someone new to the project could tell, in a minute, that it had been handled.

For most businesses the question is not whether this matters but how much of it is worth doing right now. That depends on what you are trying to achieve in the next few months, not on best practice in the abstract. There is a version of this that is over-engineered, and it is worth avoiding.

How to approach it

A custom indicator is fine, no indicator is not. There is a version of this that is over-engineered, and it is worth avoiding. It rarely shows up as a line item, which is exactly why it slips.

Accessibility work almost always improves the experience for people who have no impairment at all. The version that works in practice is usually less elaborate than the version described in the guides.

Focus-visible gives you the best of both. Where this goes wrong is almost never a lack of knowledge. Anything you cannot measure here, you are deciding by taste, which is fine as long as everyone knows it.

A working checklist

If you want a quick read on where you stand, work through this. Anything you cannot answer confidently is where to start.

• Removing the focus ring breaks the site for keyboard users
• A custom indicator is fine, no indicator is not
• Focus-visible gives you the best of both
• Someone is named as the owner, not just assumed to be
• There is a date in the calendar to review it again
• The decision and the reasoning behind it are written down somewhere findable
• You could explain the current setup to a new hire in five minutes

Where it usually goes wrong

The most common failure is not doing this badly. It is doing it once, during a launch, and never revisiting it. Circumstances move, the setup does not, and the gap widens quietly until something breaks or somebody notices the numbers.

• It was configured during a launch and has not been touched since
• Different people in the business believe different things are true about it
• There is no way to tell whether the last change helped or hurt
• The only person who understands it has left, or is about to

Most of it is correctness rather than charity: use the right element and much of it happens automatically. The reasoning matters more than the rule, because the rule has exceptions.

How we approach it

On our projects this gets handled during the build rather than added afterwards, because retrofitting it costs several times more than including it. We write down what was decided and why, so the next person to touch it is not guessing.

If you are working with someone else, the questions worth asking are simple: who owns this, how will we know it is working, and what happens when it needs to change?

A reasonable first step

Pick the single item from the checklist above that would cause the most trouble if it turned out to be wrong. Fix that one, confirm it worked, then move on. None of this needs a rewrite. Most of it is a morning's work once someone decides to do it.