• 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