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> € </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
<p aria-live="polite" aria-atomic="true"> Total price: <span id="total-price">47.80</span> € </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-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: