HTML and CSS Reference
In-Depth Information
7.9 Using ARIA Live Regions to Announce When Dynamic
Content Is Updating
Problem
You want to notify users when parts of the web page are dynamically updating.
Solution
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:
alert
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.
alertdialog
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.
log
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.
marquee
Use this for things like stock tickers or ad banners. This is similar to a log because
the information presented may change frequently.
status
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.
timer
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.
