Announcing Toasts, Loaders, and Counts

Toasts, spinners, and result counts all change the page without a reload. Without a live region, screen reader users miss them entirely.

A toast is a brief pop-up message. Give its container role status so the screen reader speaks the text as it appears. 🍞

Render one empty toast region on load and inject messages into it. Creating a fresh region each time often fails to announce.

When data is loading, announce it. A polite status message like Loading results keeps users informed instead of guessing. ⏳

When loading ends, update the same region with the outcome. Pairing a start and end message gives a clear sense of progress.

After a search or filter, speak how many items matched. A short count message orients users who cannot scan the page visually.

Updating a results list without a count leaves screen reader users unsure anything changed. One spoken number fixes that.

Live announcements interrupt the reading flow, so keep each message concise. Saved beats Your changes were successfully saved just now.

If new text is identical to the old, some screen readers stay silent. Vary the wording or clear the region first to force a re-read.

A live region set to display none will not announce. To hide it visually, use a visually-hidden class that keeps it in the accessibility tree.

You usually need just one polite region for app-wide toasts and counts. Route updates through it instead of scattering many live elements.

Your toast region never announces. The CSS hides it with display none. What is the likely fix?

You learned to voice toasts, loaders, and counts through a persistent polite region, keeping messages short and never using display none. ✅