• Success Criterion 2.4.7
  • Conformance level AA

Focus Indicator Styled for Some Components but Not Others

2.4.7 — Focus Visible

Scenario

Setting

A coworking-space booking app

What’s wrong

Custom indicator present only for some components (links styled, buttons not).

Example 

a:focus-visible {
  outline: 2px solid #0b7285;
}
button {
  outline: none;
}

Why it matters

Tabbing from a text link to the Reserve Desk button, the visible outline suddenly disappears, so the user can't tell the button is focused.

How to test

Tab through several different component types (links, buttons, custom widgets): if only some show a focus indicator and others show none, it fails for the unstyled ones.

How to fix

Audit every component type, links, buttons, custom controls, for a consistent focus style, not just the ones styled first.

a:focus-visible,
button:focus-visible {
  outline: 2px solid #0b7285;
}

Outcome

A user tabs from a link onto the Reserve Desk button and sees the same clear outline continue.

Who is affected

Keyboard users lose visual tracking specifically when moving onto buttons, inconsistent with how links behave.

Learn more

Related scenarios