A short guide to focus indicators

The version of this that works is simpler than the version most people imagine. Everything we would tell a client about focus indicators in the time it takes to drink a coffee.

The cost of retrofitting accessibility is several times the cost of building it in. Anything you cannot measure here, you are deciding by taste, which is fine as long as everyone knows it.

What it costs to ignore

Removing the focus ring breaks the site for keyboard users. Where this goes wrong is almost never a lack of knowledge. Doing this properly once is usually cheaper than doing it approximately three times.

What good looks like

A custom indicator is fine, no indicator is not. Small and consistent beats large and occasional here. It is the sort of thing that looks like polish right up until it costs you an enquiry.

Common failure modes

Focus-visible gives you the best of both. It is worth being explicit about, because assumptions differ quietly. It rarely shows up as a line item, which is exactly why it slips.

What this looks like day to day

Most of it is correctness rather than charity: use the right element and much of it happens automatically. 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

Worth checking on your own setup before it becomes someone else's problem to fix.