• 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 

button:focus { outline: none; }
a:focus { outline: none; }

Why it matters

A courier-support agent tabbing through the order-tracking screen can't tell which button, like 'Contact Courier,' is currently focused.

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

Never remove the outline without a visible replacement that meets 3:1 contrast against the adjacent background.

button:focus-visible { outline: 2px solid #0b5fff; outline-offset: 2px; }
a:focus-visible { outline: 2px solid #0b5fff; outline-offset: 2px; }

Outcome

A keyboard user tabs to Contact Courier and sees exactly where focus landed instead of losing their place.

Who is affected

Keyboard-only users lose all visual sense of their location on the page once focus outlines are suppressed.

Learn more

Related scenarios