- Success Criterion 3.3.1
- Conformance level A
Error Toast That Disappears Before It Can Be Read
3.3.1 — Error Identification
Scenario
Setting
A project-management tool's task board
What’s wrong
Toast errors disappearing before assistive technology users reach them (identification effectively absent — interacts 2.2.1).
Example
function showToast(message) {
toast.textContent = message;
toast.hidden = false;
setTimeout(() => { toast.hidden = true; }, 3000);
}
// showToast('Task needs a due date before it can move to In Progress') Why it matters
A screen reader user who is still reading the task card when the toast fires never reaches it before it vanishes, so the drag silently fails with no explanation.
How to test
Submit invalid data with a screen reader running: if a toast error appears and disappears before the screen reader user can navigate to it, it fails.
How to fix
Don't time-limit an error message; let the user close it, or at minimum give it far longer than a fixed 3 seconds.
function showToast(message) {
toast.textContent = message;
toast.hidden = false;
toast.setAttribute('role', 'alert');
toast.tabIndex = -1;
// stays until the user dismisses it or fixes the task, no auto-timeout
} Outcome
The user reads the toast at their own pace and adds a due date before retrying the move.
Who is affected
Screen reader users and people with motor disabilities who need more time to navigate to a transient message before it disappears.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Form Submission With No Way to Identify What Went Wrong
- Form That Fails Silently With No Error Message at All
- Form Errors Marked Only by a Red Border, With No Text
- Generic ‘There Were Errors’ Message With No Field Named
- Error Text That’s Visible but Never Announced to Screen Readers
- Error Summary That Names Fields Too Vaguely to Identify Them