Focus Visible Pass Rate: Measuring the Outline Shoppers Actually See

2026-10-28

There is a moment in every accessibility audit where the auditor starts tabbing and the room goes quiet. Nobody knows where the focus is. The site works beautifully with a mouse and is a dark room with a keyboard.

Focus visible pass rate turns that moment into a number you can track. It is unglamorous, easy to measure, and directly tied to whether keyboard users can operate your store at all.

Defining the metric precisely

Choose your critical journeys, typically browse, product, cart, checkout, and account, and list every interactive stop in order. For each stop, score whether a person standing a step back from the screen could say instantly where the focus is.

Pass rate is passing stops divided by total stops, per journey and overall. Report the failures by name, not just the number. A metric that cannot point at the broken element is a poster, not a tool.

How focus gets hidden

The classic cause is a global outline removal in CSS, added years ago to fix a visual annoyance, never revisited. Close behind are indicators in colours too close to the background, outlines clipped by overflow containers, and custom components that never styled a focus state at all.

Browsers provide a default indicator, so a site has to actively lose it. Most focus problems are therefore self inflicted and cheap to reverse, which is why this metric improves faster than almost any other in a program's first quarter.

What a passing indicator looks like

A strong indicator has real contrast against both the element and the page, enough thickness or offset to read instantly, and it appears on every interactive element type, including cards, image links, and custom controls, not just text links.

The modern approach is a deliberate design token for focus: one colour, weight, and offset applied consistently site wide. Consistency itself helps, because keyboard users learn your indicator once and recognise it everywhere.

Tracking without theatre

Retest the same journeys after each release that touches CSS or components, and log regressions against the release that introduced them. Focus styles break silently in refactors more than almost any other accessibility property.

Keep the journey list stable so the trend means something. A rising pass rate on a shrinking journey list is theatre. A rising rate on a fixed, honest list is progress.

Frequently asked questions

What is a good focus visible pass rate?

On critical journeys, the only defensible target is full coverage: every stop visible. Partial rates are useful as a starting diagnostic, but a keyboard shopper experiences the failures, not the average. Treat anything under complete coverage on checkout as release blocking.

Why do sites remove focus outlines?

Usually because a reset or a design preference removed the default outline for looking messy, often when a mouse user clicked and saw an outline. Modern CSS can show focus only for keyboard users, so that old trade off no longer needs making.

How do I test focus visibility quickly?

Unplug your mouse and tab through the purchase journey. At each stop, look away and back: if you cannot find the focus instantly, it fails. Screenshot the failures for the report. The whole exercise takes fifteen honest minutes.

Does focus style need to meet a contrast ratio?

Guidelines require the indicator to be clearly distinguishable, and contrast benchmarks exist for the focused state against adjacent colours. Practically, aim for an indicator you cannot miss: strong contrast, adequate thickness, and an offset so it does not blend into the element itself.