Focus Visible

Why it matters

The focus ring is to a keyboard user what the pointer is to everybody else. No designer would ship a site that hides the mouse cursor, and one line of CSS does exactly that to everyone who does not use a mouse. It is not only a dexterity question either. People with attention limitations, short-term memory limitations, or limits on executive processing rely on seeing where they are, because holding the position in their head instead is work the interface should be doing. A ring styled to fit the brand costs one rule and turns a compliance checkbox into something the design owns.

Who this rule protects

This affects every sighted keyboard user, who otherwise guesses where the next Enter press will land, and it affects people with attention limitations, short-term memory limitations or executive processing difficulties, who need to see where focus is rather than remember it.

How to check it yourself

1. 1Tab through the whole page and watch for a visible change at every stop, including custom components, cards and dropdowns built outside the design system.
2. 2Check the dark sections separately. A ring tuned for a light background can vanish on a dark one, and the documented answer is a two-colour indicator that shows against both.
3. 3Hold still on one element for a few seconds. The indicator has to stay put, and a ring that fades out fails.
4. 4Search the CSS for outline: none and confirm every instance has a real replacement, normally through :focus-visible.
5. 5Judge the strength of the indicator against 1.4.11, which asks for 3:1 against the colours it sits next to. This rule on its own will never catch a weak ring.

Failures we see most often

• A global reset that sets outline: none across the whole site and puts nothing in its place.
• Script that moves focus off an element the moment it arrives, so nothing is ever indicated and the tab order breaks alongside it.
• A focus style that covers links and buttons and stops at the custom dropdown, the card and the calendar.
• A ring that appears and then fades out after a moment, leaving the user on a page with no cursor.

Who this one is for

Read from this rule's own note above, so the grouping and the note cannot disagree.

• Motor and keyboard-onlypeople who cannot use a mouse, or cannot use one precisely
• Cognitive and learningpeople for whom the difficulty is understanding, remembering, or staying with it

How this one is tested

We list 1 ACT rule against 2.4.7. Each one defines exactly what a checker looks at, which is how automated tools decide what to flag. Each one also checks a slice, so passing every rule here is not the same as meeting the criterion, and a rule can be proposed rather than approved or need a person to finish it. The note beside each says which.

• Element in sequential focus order has visible focusA tool can check this

How to fix it

• Define one :focus-visible style and apply it everywhere. A 2px ring with an offset is the shape the AAA rule asks for, so building to it now buys 2.4.13 alongside this one.
• Use a two-colour indicator, such as a light ring inside a dark one. That is the documented way to stay visible against every background without tuning it section by section.
• Consider leaving the browser's own indicator alone. Using the platform default is a documented way to satisfy this rule and it costs nothing at all.
• Put the focus style in the design system rather than in page CSS, so the next component inherits it instead of needing a pass of its own.
• Do not assume :focus-visible is always right. Pointer users sometimes benefit from seeing focus too, and the standard suggests keeping an explicit indicator in those cases.

Passes vs. fails