ARIA live region
A patch of the page marked so screen readers read out any update to it, without stealing the user's place.
See it
What it is
A live region is a container you mark with aria-live so that whenever its contents change, the screen reader speaks the new text without the user having to go find it. Toasts, form error summaries, search result counts, 'copied to clipboard', upload progress: sighted users catch those with peripheral vision, everyone else needs the announcement.
Two politeness settings do almost all the work. aria-live='polite' queues the message until the reader finishes its current sentence, and it is the right default. aria-live='assertive' interrupts immediately, so save it for things like session timeouts and payment failures. The 'status' and 'alert' roles are shorthand for the same two behaviors.
Big gotcha: the region has to exist in the DOM, empty, before you put text in it. If you mount the whole toast component at once, most screen readers see a new node rather than a changed one and say nothing. Render the empty container on page load, then swap text into it. Second gotcha: do not stuff a live region with every state change, or you get a talking page nobody can use.
Ask AI for it
Add an ARIA live region so screen readers announce our toast messages. Render a persistent, always-mounted container with role='status' and aria-live='polite' aria-atomic='true' near the top of the app layout, visually hidden with an sr-only class, and update its text content when a toast fires instead of mounting a new node. Use aria-live='assertive' with role='alert' only for errors that block the user. Do not move focus, and do not try to clear the region once the message has been announced: browsers expose no dependable 'finished speaking' event, so any clearing timer is a guess. Leave the container mounted with its last message in place, and when the same string has to fire twice in a row, blank the text and set it again on the next frame so the reader registers an actual change.