ARIA Live Regions: Announcing Dynamic Content
ARIA live regions tell screen readers about content that changes without a page reload, like a notification banner. Use aria-live="polite" for most updates and assertive only for critical alerts.
Why it exists
Modern web apps change content dynamically using JavaScript without reloading the page. A sighted user sees a new notification or updated search results appear, but a user on a screen reader would be unaware of the change. ARIA live regions solve this by programmatically announcing content changes to assistive technologies.
The mental model
Think of a live region as an "announcement zone" on your page. You mark a container and tell the browser, "Watch this spot. If its content changes, announce it to the screen reader user." You also set a priority for the announcement, telling the browser how urgently the user needs to hear it.
How it works
You add the aria-live attribute to the element that will contain the dynamic content. It has three main settings. First, polite: the screen reader waits for the user to be idle before making an announcement. This is the default and most common choice. Second, assertive: the screen reader interrupts whatever it's currently saying to make the announcement immediately. This is for critical, time-sensitive alerts only. Third, off: changes are not announced unless the user focuses on the element.
When to use it
Use live regions for important, non-interactive updates. Good candidates include "message sent" confirmation toasts, live-updating sports scores, or notifications that new items have been added to a list. The role="status" attribute is a convenient shortcut for aria-live="polite".
When not to use it
Avoid using aria-live="assertive" unless absolutely necessary, as it can be extremely disruptive. If a change requires immediate user action, a modal dialog (role="alertdialog") is often more appropriate than an assertive live region. Don't announce trivial or purely decorative changes.
One canonical example
A "settings saved" notification. Your page includes an empty container like . When the user saves their settings, your JavaScript populates it with text: Your settings have been saved.. Because the container was already marked as a live region, assistive technology will announce this message without interrupting the user's workflow. The key is that the live region container must exist before the content inside it changes.
Interview question
When displaying a "Settings saved successfully" notification that doesn't require immediate user action, which ARIA live region setting is most appropriate?
- a.aria-live="assertive" to ensure the user is immediately aware of the save status.
- b.aria-live="polite" to announce the status without interrupting the user's current task.Correct
- c.aria-live="off" since the user just performed an action and might expect a change.
- d.No aria-live attribute, but use role="alert" instead for accessibility.
Why? this is the answer
The card explicitly uses "settings saved" notifications as a canonical example for aria-live="polite". This setting announces updates without interrupting the user's current workflow, which is ideal for non-critical confirmations. aria-live="assertive" is reserved for critical, time-sensitive alerts that demand immediate attention, which a simple confirmation message typically does not.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on accessibility — each one lists the topics its interview covers.
See open roles