- 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
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Page Auto-Redirects on a Timer With No Way to Stop It
- Page That Auto-Reloads and Resets the User’s Position
- Server Redirect Timeout With No Warning or Way to Extend It
- Session Expiring With No Warning and No Way to Extend It
- Session Warning That Gives Users Less Than 20 Seconds to Respond
- Session Extension Allowed Fewer Than the Required 10 Times