The Focus Indicator Metric: The Cursor Keyboard Users Actually See

A keyboard user who cannot see where focus is cannot use your site. The focus indicator is the cursor for the keyboard, and most sites either remove it or make it so faint it might as well not exist. WCAG 2.2 made it measurable, and the measurement is unforgiving.

The outline is the cursor

A mouse user has a cursor. A keyboard user has a focus indicator. It is the only way they know where they are on the page, and without it they are navigating blind. Most sites remove the default browser outline, because it looks ugly, and replace it with nothing, because nobody asked for a replacement. That is the most common focus failure in the fleet, and it has been a failure since WCAG 2.0, under 2.4.7, Focus Visible. WCAG 2.2 made it measurable, and the measurement is unforgiving.

The requirement is in Success Criterion 2.4.11, Focus Not Obscured (Minimum), and 2.4.13, Focus Appearance. The indicator has to be at least 2 pixels thick, have a contrast ratio of at least 3 to 1 against adjacent colours, and not be entirely hidden by other content. A 1-pixel dotted line in light grey on a white background fails all three. A 2-pixel solid outline in a dark colour, with an offset so it does not blend into the element, passes.

The contrast ratio post covered the same idea for text: the number is a floor, and the floor is measurable. Focus appearance is the same kind of metric, and it is measured the same way: against the computed style in the browser, not the design file.

Focus-visible is the answer to the ugly outline

The objection to a visible focus indicator is always aesthetic: the outline looks ugly when a mouse user clicks a button. The answer is :focus-visible, a CSS pseudo-class that shows the indicator when the user is navigating with a keyboard and hides it when they click with a mouse. It is supported in all modern browsers, and it gives mouse users a clean design and keyboard users a visible indicator. There is no longer a trade-off, and there has not been one for years.

The implementation is two lines: a :focus-visible rule that sets a 2-pixel outline with a 3 to 1 contrast colour, and a :focus rule that removes the outline only when :focus-visible does not apply. The common mistake is to remove the outline in a :focus rule and never add it back in :focus-visible. That is the failure, and it is visible in the first keyboard test.

The redundant entry post showed how a small design decision can tax a whole class of users. Removing the focus outline is the same kind of tax, and it is levied on the users who need the site most.

The test takes a minute

Tab through the site with a keyboard, no mouse, and watch the focus indicator. It should be visible on every interactive element: links, buttons, form fields, and custom controls. It should not disappear behind a sticky header, and it should not be so faint that you have to hunt for it. If you lose track of focus at any point, the indicator has failed, and the fix is to make it thicker, darker, or offset.

The metric to track is the share of interactive elements with a visible focus indicator that meets the 2-pixel and 3 to 1 requirements, and the goal is 100 percent, because a single element without a visible indicator can be the one a keyboard user needs to complete a purchase. A site that is usable by keyboard is a site that is usable by everyone, and the focus indicator is the cheapest part of that promise.

Frequently asked questions

What does WCAG 2.2 require for focus indicators?

WCAG 2.2 Success Criterion 2.4.11, Focus Not Obscured (Minimum), and 2.4.13, Focus Appearance, require a focus indicator that is at least 2 pixels thick, has a contrast ratio of at least 3 to 1 against adjacent colours, and is not entirely hidden by other content. The indicator has to be visible on every interactive element.

Can I remove the default focus outline?

No. Removing the outline and replacing it with nothing is the most common focus failure in the fleet, and it fails 2.4.7, Focus Visible, which has been in WCAG since 2.0. If you remove the outline, you have to replace it with something equally visible, like a 2-pixel border or a background change.

How do I show a focus indicator only for keyboard users?

Use :focus-visible, which shows the indicator when the user is navigating with a keyboard and hides it when they click with a mouse. That is the standard solution, and it is supported in all modern browsers. It gives mouse users a clean design and keyboard users a visible indicator.

Is a 2-pixel outline enough?

Yes, and it is the minimum. A 2-pixel outline with a 3 to 1 contrast ratio against the background is the WCAG 2.2 requirement, and it is visible enough for most users. A thicker outline, or one with an offset so it does not blend into the element, is better, and it costs nothing.

What is the most common focus failure after removing the outline?

The most common failure is a focus indicator that is obscured by a sticky header or a modal, so the focused element is behind other content. WCAG 2.2 2.4.11 requires that the focused element is not entirely hidden. The fix is to scroll the element into view when it receives focus, and to check that sticky headers do not cover it.