• Success Criterion 2.2.1
  • Conformance level A

Time-Limited Status Message That Vanishes Before It Can Be Read

2.2.1 — Timing Adjustable

Scenario

Setting

An online clothing store's product listing page

What’s wrong

Toast/status messages carrying essential info auto-dismissing on a timer with no way to extend/recall.

Example 

showToast("Only 2 left in your size", 2000); // auto-hides, no way to recall it

Why it matters

A shopper who looks away for a second misses the low-stock warning and later finds the item sold out.

How to test

Wait for a toast/status message carrying essential information to auto-dismiss: if there's no way to extend or recall it before it disappears, it fails.

How to fix

Leave time-sensitive messages visible until the user dismisses them.

function showStockWarning(msg) {
  toast.textContent = msg;
  toast.setAttribute('role', 'status');
  // no auto-hide timeout
}
// <button onclick="toast.hidden = !toast.hidden">View stock alerts</button>

Outcome

Checking back later, a shopper still finds the low-stock warning waiting for them.

Who is affected

Screen reader users and people with slower visual processing miss timed toasts before they can read or hear them.

Learn more

Related scenarios