Success Criterion 2.4.7
Conformance level AA
W3C reference F78

Focus Outline Removed by CSS With No Replacement

2.4.7 — Focus Visible

Scenario

Setting

An online clothing store's product listing page

What’s wrong

CSS removes or hides the focus outline (outline:none / border removal) with no replacement — keyboard users can't see where they are on the page.

Example

On an online clothing store's product listing page: CSS removes or hides the focus outline (outline:none / border removal) with no replacement — keyboard users can't see where they are on the page.

Why it matters

Sighted keyboard users and low-vision users who must see where focus is. The practical effect on an online clothing store's product listing page: they get stuck and can't reach the control.

How to test

Tab to any element after checking DevTools for outline:none or a removed border with no replacement style: no visible indicator at that stop fails.

How to fix

If outlines/borders are restyled, supply a replacement focus indicator at least as visible.

Outcome

That one change on an online clothing store's product listing page means they reach and operate the control without a mouse, specifically for the “Focus Outline Removed by CSS With No Replacement” issue on an online clothing store's product listing page.

Who is affected

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

Learn more

Understanding Understanding document (opens in a new tab)
Technique Related technique (opens in a new tab)