The visible focus check: keeping keyboard users able to see where they are

Who depends on focus

More people than designers tend to assume. Someone with a tremor or limited hand movement may find a mouse hard to use and rely on the keyboard or a switch device. Many screen reader users move through a page by keyboard. Power users fill in forms with Tab and Enter because it's quicker. In each case, the focus indicator is the cursor. Without it, a visitor who presses Tab four times has no idea whether they're on the booking button, the phone link or somewhere in the footer.

Accessibility guidelines are clear on this: WCAG requires that keyboard focus be visible. The habit of removing it began because the browser's default ring appeared after mouse clicks too, and some people found that untidy. The fix for that complaint exists now, which is the next section.

:focus versus :focus-visible

:focus

Matches any element that has focus, however it got it, including a mouse click on a button.

:focus-visible

Matches only when the browser judges a visible indicator is useful, which in practice means keyboard focus, and always for text fields. Clicking a button with the mouse doesn't trigger it.

:focus-within

Matches an element when it or anything inside it has focus. Useful for highlighting a whole form row or a card.

So there's no longer a trade-off. Style :focus-visible clearly, and mouse users don't see a ring after clicking while keyboard users always do. The design background is covered in focus state design.

What the gate looks for

The visible keyboard focus check reads the page's styles, both its style elements and any inline style attributes, and passes if any of :focus, :focus-visible or :focus-within appears. If none does, publishing stops with a message naming “visible keyboard focus” and the advice to style :focus-visible so keyboard users can see where they are. It applies to design-engine pages and model-written apps alike; an app that leaves focus unstyled is repaired against the gate before you see it.

The focus style Anticode pages ship with

Every page from the design engine includes this rule:

:focus-visible{outline:2px solid var(--a);outline-offset:3px}

In plain terms: a two-pixel outline in the site's action colour, drawn three pixels outside the element so it doesn't crowd the text. Because it's tied to the action colour, it matches the design system and follows the colour you choose. The booking calendar needs one more rule, because its day and time choices are real radio buttons hidden under styled labels: when one of those inputs has keyboard focus, the visible label next to it gets the same outline. That way someone tabbing through the calendar can see which slot they're on.

Checking it yourself

1. Open the published page and click once in the address bar, then press Tab.
2. Keep pressing Tab. Every link, button and field should show the outline in turn, in a sensible order.
3. Use Shift+Tab to go back, Enter to follow a link and Space to choose a radio option.
4. Check that nothing receives focus while hidden, and that the outline is visible against every background the page uses.

Limits

• It checks that a rule exists, not that it works. A stylesheet with only :focus{outline:none} mentions :focus and would pass. The gate catches the common case of no focus styling, not every bad one.
• No contrast measurement. Whether the outline stands out against a given background isn't tested. An action colour close to the page background makes a weak ring.
• No tab-order test. The order in which elements receive focus follows the page's structure and isn't checked here.
• One of several basics. The design gate also requires a language, a phone viewport, a title, reduced-motion support and image text.

Questions people ask

Why is outline: none bad for accessibility?

It removes the only sign of where keyboard focus is. People who navigate without a mouse can no longer tell which link or button they're on.

Will the ring show when I click a button with the mouse?

No. Anticode pages style :focus-visible, which browsers apply for keyboard focus and text fields, not after a mouse click on a button.

Can I change the focus colour?

It follows the site's action colour, so choosing a different action colour changes the ring too.

Does the visible keyboard focus check run on apps?

Yes. Model-written apps go through the same design gate and are repaired against it before they're shown.