Status messages are announced via aria-live

Toast notifications, form submission confirmations, live search result counts, and loading states are invisible to screen reader users unless explicitly marked with aria-live. WCAG 2.2 SC 4.1.3 (Status Messages) is a Level AA requirement added in WCAG 2.1: status messages must be programmatically determinable through role or property so they can be announced without receiving focus. A 'Form saved successfully' toast that a sighted user sees and a screen reader user never hears is a silent UX failure.

Wrap non-intrusive status messages in an aria-live="polite" region so screen readers announce them after completing the current task. Use role="alert" for urgent errors.

// Polite announcement — waits for current speech to finish
<div aria-live="polite" aria-atomic="true" className="sr-only">
  {statusMessage}
</div>

// Alert — interrupts current speech immediately
{criticalError && (
  <div role="alert" className="text-red-600">
    {criticalError}
  </div>
)}

// Toast pattern — rendered in portal, still announced
export function Toast({ message }: { message: string }) {
  return createPortal(
    <div role="status" aria-live="polite" className="toast">
      {message}
    </div>,
    document.body
  )
}

Ensure the aria-live region exists in the DOM before any message is inserted — toggling both the region and its content simultaneously can prevent announcements in some screen readers.