Introduction
The WAI-ARIA spec describes Live Regions as…
Live regions are perceivable regions of a web page that are typically updated as a result of an external event when user focus may be elsewhere.
In my words, what that means is a region on the page (e.g. a div or a section) can be marked as “live”. This allows the assistive technology agent (e.g. screen-readers) to “announce” updates, even when the user’s focus (a.k.a. focus ring) is outside that region.
This is interesting and has many use cases in the real-world. Some examples where the assistive technology agent can announce updates are, when:
- User receives a Facebook/Twitter notification
- Stock ticker price increases
- New chat message is received
- Progress bar updates
- Form validation error occurs
Example
I created an example to demonstrate the same. I’ve also updated the same example on the MDN documentation page for ARIA Live Regions.
Here’s a live CodePen demo of the above example. To see this in action. Start and activate VoiceOver, select a planet in the dropdown and click Go. You should now hear VoiceOver speak the information about the selected planet (as shown in the screenshot above).
Implementation
Using ARIA Live Regions is pretty easy and straight-forward. I’ll show you how!
Marking up the live region
Mark up the container element of the live region using role="region" and add an aria-live attribute with either polite or assertive. You can read about their descriptions in aria-live spec documentation. It’s generally recommended to use polite as it will instruct the screen-reader to announce the update after all other voice announcements are completed. There’s more information about the voice queue on the ARIA Screen Reader Implementors Guide page on MDN.
Updates to the live region
The contents of the live region must be updated dynamically (usually via JavaScript) for the assistive technology agent to announce any updates to the live region. Otherwise, it will not be announced. Initial HTML inside the live region, which is delivered through server, will not be announced.
Using a more specific role
In my example above, I’ve used a region value for the role attribute. region is considered quite generic. It’s preferable to use a more specific role attribute value. I’ve created a drawing to illustrate examples of the various live region roles: alert, log, marquee, status and timer. The spec and MDN documentation page for ARIA Live Regions do a great job of describing them.
Here’s another example of a simple messaging application. To see this in action. Start and activate VoiceOver, type a message, click Send. You should now hear VoiceOver speak your message when it’s updated in the Receive section below.
Atomic updates
The aria-atomic attribute instructs assistive technology agents to announce the entire region as a whole, even when only parts of the region have changed. The Clock example on the MDN documentation page for ARIA Live Regions page is an excellent example of this.
Closing thoughts
I hope this article give you a good introduction to ARIA Live Regions. Feel free to comment below if some parts are not clear or if you have any questions. Here are some more references that I found useful:
