Announcing Toasts, Loaders, and Counts
Make async UI changes audible.
Async UI Needs a Voice
Toasts, spinners, and result counts all change the page without a reload. Without a live region, screen reader users miss them entirely.
Toasts Should Announce
A toast is a brief pop-up message. Give its container role status so the screen reader speaks the text as it appears. 🍞
<div role="status">Item added to cart</div>All lessons in this course
- polite vs assertive: Choosing Urgency
- status, alert, and log Roles
- Announcing Toasts, Loaders, and Counts
- Why Live Regions Fail and How to Fix Them