A11y tips: aria-live and aria-atomic

As we said in the previous post, one of the options to notify a screen reader user of changes in the content of an area is using the aria-polite attribute, which can take two values:

• assertive: the screen reader announces the change immediately.
• polite: the screen reader waits to announce the change in the content until the user finishes interacting.

And an example of using assertive could be a warning message when a session is about to expire, which will be announced immediately as the user needs to know right then, not later.

<p aria-live="assertive">
  You have 30 seconds left before logging out
</p>

And an example of the use of polite could be the update of a price in a purchase process, which will be announced when the user finishes interacting with the shopping cart.

<p aria-live="polite">
  Total price: 
  <span id="total-price">32.50</span> &euro;
</p>

In the example above, only the content that changes will be announced, that is, the price, so the screen reader user will only hear a 47.80 without further context. This can be a bit confusing, so there is an extra attribute that will make all the content of the wrapper be announced, even if only part of it has changed. That attribute is aria-atomic="true":

<p aria-live="polite" aria-atomic="true">
  Total price: 
  <span id="total-price">47.80</span> &euro;
</p>

Thus, in our new example, when the price updates, instead of hearing a simple 47.80 the user will hear total price 47.80 euro, which offers much clearer information about what is happening.

With this combination of both attributes, aria-live and aria-atomic, we achieve an optimal result in communicating changes in the content to the user of the screen reader.

An important aspect that must be taken into account is that aria-live can only be used with elements initially present in the DOM, those that are created dynamically and inserted in the DOM are not listened to and therefore are not announced.

How to solve this problem? For that there is the following parameter that we will see: role="alert".