Toast Notification

Purpose

Toasts provide non-blocking feedback about the result of an action. They appear temporarily and disappear automatically, without interrupting the user’s current task.

Usage Guidance

• Use toasts for non-critical confirmations (“Saved successfully”)
• Do not use toasts for error messages requiring user action (use inline errors or dialogs)
• Provide a dismiss button for toasts with long display times
• Do not display multiple toasts simultaneously

Accessibility Considerations

• Use a live region (role="status" with aria-live="polite" or role="alert" with aria-live="assertive") to announce to screen readers
• Do not move focus to the toast
• Provide a way to dismiss before auto-dismiss for users who need more time
• Respect prefers-reduced-motion for animations

Keyboard Support

Toasts do not receive focus. If they include a dismiss button, keyboard users can reach it with Tab. Do not trap focus in a toast.

Screen Reader Behavior

The content of the live region is announced when it changes. aria-live="polite" waits until the user is idle; aria-live="assertive" interrupts immediately.

ARIA Requirements

• role="status" (polite) or role="alert" (assertive) on the toast or its live region container
• A persistent live region container in the DOM (insert content into it dynamically)

Common Mistakes

• Moving focus to the toast on appearance
• Creating live regions dynamically (must exist in DOM before content is inserted)
• Using assertive for non-critical messages (causing screen reader interruption)
• No dismiss mechanism for auto-dismissing toasts

Live Example

Code Pattern

<!-- Live region (place in DOM on page load, before any toasts are needed) -->
<div
  id="toast-region"
  aria-live="polite"
  aria-atomic="true"
  style="position: fixed; bottom: 1.5rem; right: 1.5rem;"
></div>

function showToast(message) {
  var region = document.getElementById('toast-region');
  var toast = document.createElement('div');
  toast.setAttribute('role', 'status');
  toast.textContent = message;
  region.appendChild(toast);
  // Remove after delay
  setTimeout(function() { toast.remove(); }, 5000);
}