Accessible Toast Notifications & Snackbars: ARIA Live Regions & Timing Control

Toast notifications and snackbars provide transient feedback following user actions (e.g., "Item saved to draft" or "Connection lost"). However, if a toast disappears too quickly, fails to notify screen readers, or traps keyboard focus, it violates WCAG 2.2.1 (Timing Adjustable) and WCAG 4.1.3 (Status Messages).

Why Standard Toast Notifications Fail Accessibility Audits

Common engineering failures in toast libraries include:

• Premature Auto-Dismissal: Toasts that vanish after 3 seconds prevent users with dyslexia or motor delays from reading the message.
• Unannounced Dynamic Injection: Inserting a new DOM element without an established `aria-live` container results in total silence on screen readers.
• Focus Snatching: Forcing keyboard focus directly into a transient toast disrupts the user's active workflow and form filling.

ARIA Live Politeness: Polite vs Assertive Queues

WCAG Timing Rules: Auto-Dismiss vs Manual Dismissal

Under WCAG 2.2.1:

1. Toasts without interactive buttons should remain visible for at least 6 to 8 seconds, and automatically pause when the mouse hovers or keyboard focus enters the message.
2. Toasts containing actionable buttons (e.g., "Undo" or "Retry") must not auto-dismiss until the user takes action or explicitly closes the notification.

Keyboard Accessibility and Focus Traversal for Action Toasts

If a toast contains an "Undo" button, provide a global keyboard shortcut (e.g. `Alt + T` or `Ctrl + M`) allowing keyboard users to jump directly to the notification without tabbing through the entire page.

Accessible Toast Container Boilerplate

<!-- Pre-existing Live Region in Initial HTML -->
<div 
  id="toast-container" 
  class="toast-portal" 
  aria-live="polite" 
  aria-atomic="true" 
  aria-relevant="additions text">
</div>

<script>
function showToast(message, type = 'status') {
  const container = document.getElementById('toast-container');
  const toast = document.createElement('div');
  toast.className = `toast-item toast-${type}`;
  toast.innerHTML = `
    <span class="toast-text">${message}</span>
    <button type="button" class="toast-close" aria-label="Dismiss notification">×</button>
  `;
  
  toast.querySelector('.toast-close').addEventListener('click', () => {
    toast.remove();
  });
  
  container.appendChild(toast);
  setTimeout(() => toast.remove(), 7000);
}
</script>