HTML and CSS Reference
7.9 Using ARIA Live Regions to Announce When Dynamic
Content Is Updating
You want to notify users when parts of the web page are dynamically updating.
First, assign the aria-live attribute to the HTML element where a content change or
update may occur and decide on the urgency of communicating the update.
Then, select a standard live region role. Assign the role to the parent HTML element
that contains the content that may change. If the default behaviors for the role are
appropriate, you won't need to specify attributes:
<div role="alert" >
The standard live region roles include:
Use this for a single, time-sensitive notification. It will be handled as an assertive
live region and the update will appear immediately. An alert cannot receive focus,
and therefore cannot be closed by the user.
This type of alert message can receive focus. When the alert appears, you must
automatically set focus on an active element in the alert dialog, such as an “OK”
button. Include the aria-describedby attribute on that active element to point to
the message in the dialog.
Use this for things like message history or error logs: new information is added to
the end of the log, and the oldest information may disappear.
Use this for things like stock tickers or ad banners. This is similar to a log because
the information presented may change frequently.
Use this for a minor notification that does not warrant use of an alert. It will be
handled as an assertive live region. A status should not receive focus. If a different
part of the page drives the status changes, use the aria-controls attribute to
identify the relationship.
Use this to display time elapsed or remaining. Update the timer at fixed intervals,
unless the timer is paused or has reached the end of its count.