Live Regions

Lesson Objective

After this lesson, you will be able to describe the importance of annotating live regions using ARIA attributes.

Time to complete

10 minutes


ARIA live regions video (1:07) and slide


When you are developing web applications, consider if there are certain scenarios in which you would want the screen reader to notify the user of updates to another part of the page. For example, if your user receives an instant message from someone, and they are in the middle of listening to an email, you need to decide if it is better to (1) automatically take the user away from the email and read the chat message, or (2) wait until the user is finished with that section and then jump to the chat message.

Other situations where this issue might occur include:

  • ads on a page
  • sports scores that update
  • stock price tickers

The ARIA framework defines the notion of a live region. Elements or regions of the page that have the aria-live attribute set or have their role set to one of the live region roles are able to update the user when something on the page has changed without losing focus on what the user was doing. The examples in this unit demonstrate different variations of this feature.

When to add live regions

When you are developing your web application and are considering how to apply live regions, ask yourself these questions:

  • What is the smallest critical region that you could add a live region to?
  • What parts of your page (if any) should update when the user interacts with the page?
  • Should an event from this region interrupt what the user is currently doing, or can it wait until they have finished what they are doing?

As the developer, you know the function and purpose of your web application best, and the following lessons will give you guidelines to think about. The best way to know how to apply live regions is to know your audience well through testing your application and collecting feedback. This will help you find the right balance for notifications.