• 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 

.product-card a,
.product-card button {
  outline: none;
}

Why it matters

A keyboard shopper tabbing through the product grid gets no visual indication of which item or button is currently focused.

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 the default outline clashes with your design, replace it with an equally visible custom style, never remove it outright.

.product-card a:focus-visible,
.product-card button:focus-visible {
  outline: 2px solid #1a56db;
  outline-offset: 2px;
}

Outcome

A shopper tabs through the grid and always sees a clear outline marking the current product.

Who is affected

Keyboard users and people with low vision lose all sense of position while browsing products.

Learn more

Related scenarios