Introduction: The “Invisible” Update Websites are alive. They update in real-time. You add an item to a cart, and a little number changes. You search for a flight, and the results list refreshes. If you can see the screen, these changes are obvious. But if you are blind and using a screen reader, these updates happen in total silence. You might be waiting for results to load, not realizing they’ve been sitting there for a minute already.
Enter “Live Regions”
An ARIA Live Region is a special part of your code that tells the screen reader: “Hey, keep an eye on this spot. If anything changes here, speak it out loud.” You do this by adding aria-live to a container.
There are two main settings:
- aria-live=”polite”: This is the most common. The screen reader will wait until it finishes what it’s currently saying before announcing the update. It’s like a polite friend waiting for a gap in the conversation. Use this for things like “Saved successfully” or “3 items found.”
- aria-live=”assertive”: This is for emergencies. It interrupts the screen reader immediately. Use this sparingly—only for things like “Your session is about to expire” or “Critical error.”
Atomic Updates
Sometimes you only change one word in a sentence, but that word makes no sense without the rest of the sentence. By adding aria-atomic=”true”, you tell the screen reader to read the whole container again, even if only a tiny part changed. This ensures the user always has the full context of the message.