• Success Criterion 2.4.7
  • Conformance level AA

Focus Indicator That’s Only Partially Visible When Clipped

2.4.7 — Focus Visible

Scenario

Setting

A language-learning app's lesson screen

What’s wrong

Focus indicator only partially visible — clipped by overflow:hidden (style that clips overflowing content) ancestors or drawn on only one edge of the component.

Example 

button:focus { outline: none; }

Why it matters

Sighted keyboard users and low-vision users who must see where focus is.

How to test

Tab to a control and zoom in: if the focus indicator is only partially visible (clipped by an overflow:hidden ancestor, or drawn on only one edge), it fails.

How to fix

A clearly visible focus indicator must appear, in full, on every interactive element when it receives keyboard focus. button:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; } Removing the focus outline with no replacement makes it impossible to see which element has keyboard focus.

Outcome

On a language-learning app's lesson screen, this barrier is gone for sighted keyboard users and low-vision users who must see where focus is — they no longer have to work around this.

Who is affected

Sighted keyboard users and low-vision users who must see where focus is.

Learn more

Related scenarios