Announcing status messages with ARIA live regions

What's really being asked

This probes knowledge of ARIA live regions: how to make screen readers announce content that changes after page load without yanking the keyboard focus away from the user current task.

The full answer

The mechanism is a live region. Wrap the message area in an element with aria-live set to polite for non-urgent updates or assertive for urgent ones, or use the shorthand roles: role status implies polite and role log also exists, while role alert implies assertive. For a save confirmation, polite or role status is right because it should wait until the screen reader finishes the current utterance. A critical detail: the live region container must be present in the DOM before you change its contents, because screen readers watch existing live regions for mutations. You then set or append the text, which triggers the announcement. Focus stays put. Keep messages short and avoid rapid repeated updates that flood the user.

The mistakes people make

Moving focus to the toast defeats the requirement and disrupts the task. Creating both the live region and its text in one insertion can mean the screen reader never registered the region, so nothing is announced. Using assertive for routine confirmations is rude because it interrupts. Hiding the region with display none stops some screen readers from announcing it.

What usually comes next

When do you choose alert versus status? How do aria-atomic and aria-relevant change what gets read? Why do some announcements fail intermittently and how do you debounce or re-trigger them? How do toast libraries handle this?

A concrete example

After saving a profile, a visually hidden div with role status already in the DOM receives the text Your profile has been saved. The screen reader announces it after finishing whatever it was reading, the user keeps editing the next field, and focus never moved. For a failed save you would instead use role alert so it interrupts immediately.