Success Criterion 1.4.11
Conformance level AA
W3C reference F78

Focus Outline Removed With No Replacement Indicator

1.4.11 — Non-text Contrast

Scenario

Setting

A food-delivery app's order-tracking screen

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

Here's what happens on a food-delivery app's order-tracking screen: 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

Low-vision and color-blind people who need to perceive controls and meaningful graphics. In this case (a food-delivery app's order-tracking screen), they can't read the text against its background.

How to test

Tab to a control after CSS resets its outline: measure the replacement focus indicator's contrast — if none exists, it fails.

How to fix

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

Outcome

Once corrected, a food-delivery app's order-tracking screen lets them tell the information apart without relying on color.

Who is affected

Low-vision and color-blind people who need to perceive controls and meaningful graphics.

Learn more

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