The aria-live attribute is used to notify assistive technologies (such as screen readers) of changes to the content of an element. It can be used to indicate that the element will receive updates, and to specify how important those updates are.

When a part of a web page changes, a screen reader should announce the change to the user, even if the user's focus is not on that part of the page. This is because the user may not be aware of the change otherwise. The aria-live attribute can be used to indicate to the screen reader that a UI component is in the process of changing.

Table of content

1. Example of Aria-live use.
2. Aria-live and region attributes
3. When you should not use aria-live
4. Accessibility and React
5. Further reading about aria-live

Example of Aria-live use.

The aria-live attribute is an important part of making web content accessible to people with disabilities. By using it correctly, you can ensure that your users are always aware of the latest updates to your content.

Consider the following code

<div class="loading">
  Preparing your file for download.
</div>

<div class="download">
  File has been processed. Download will start soon.
</div>

When the following DIVs appear to hide on a page, an accessibility user might not even realize that these changes are happening. We can add aria live attributes to make sense of this.

<div class="loading" aria-live="polite">
  Preparing your file for download.
</div>

When a new DIV appears, the screen reader will announce the text "Preparing your file for download" to the user. Aria live has following possible values.

• off - This is the default value and indicates that screen readers should not announce the content.
• polite - Updates will be announced to assistive technologies when the user is idle. This is the most common value.
• assertive - Updates will be announced to assistive technologies immediately, regardless of whether the user is idle. This should only be used for important updates that the user needs to know about right away.

In the context of the original text, the aria-live attribute would be used to tell the screen reader that a UI component is in the process of changing. This would allow the screen reader to announce the change to the user, even if the user's focus is not on that part of the page.

Aria-live and region attributes

There is one way to make sure your html containers have aria-live value without explicitly setting this attribute. This is by using role attribute with specific values.

<div id="clock" role="timer" aria-live="polite">
  <span id="clock-hours"></span>
  <span id="clock-mins"></span>
</div>

Notice that role=timer attribute here automatically adds polite attribute even though in above code it is added more explicitly.

Other values for role are :

• log - Should be used for things like chat, updates etc.
• status - Should be used to describe status. Screen readers often have special features that allow use to check status.
• alert - Use this for something important that requires users immediate attention such as an error. To maximize compatibility, some people recommend adding a redundant aria-live="assertive" when using this role.
• progressbar - A hybrid between a widget and a live region. Use this with aria-valuemin, aria-valuenow and aria-valuemax. (TBD: add more info here).
• marquee - Text which scrolls, such as a stock ticker.
• timer - Any kind of timer or clock, such as a countdown timer or stopwatch readout.

When you should not use aria-live

When you design you application always think about the accessibility needs and minimize the unexpected updates to the page. This will help both the accessibility users as well as your other users. If you have too many aria-live attributes then the screen reader might end up talking too much confusing the user.

We should use such screen updates rarely and for every specific things.

Accessibility and React

If you are using react remember that all the aria tags are supported by React components and they are no camel cases but instead are to be used like normal html attributes.

To read more about react and accessibility you can read our other post.

Further reading about aria-live

You can read the official documentation of aria-live and see the examples here.