HTML and CSS Reference
In-Depth Information
If you need something other than the standard ARIA live region roles and behaviors,
you can create a custom live region.
Custom live regions
First, identify where a content change or update may occur and decide how urgently
the update needs to be communicated.
Next, assign the
aria-live
attribute to the parent HTML element that contains the
content that may change. The value for the
aria-live
attribute will reflect how quickly
the update will be communicated to users. The available values are:
•
aria-live="off"
, where the update is not announced
•
aria-live="polite"
, where the update is announced when the user is idle or
finishes with his current activity
•
aria-live="assertive"
, where the update is announced as soon as possible, even
if it means interrupting the user's current task
Avoid using
aria-live="assertive"
unless it's critical to communicate the change
immediately. Users may consider the disruption jarring and rude.
As in a polite conversation where people wait until there is a pause to chime in, the
aria-live="polite"
indicates a change when there is a break in the user experience.
So, let's start with fleshing out a
div
element:
<div
aria-live="polite"
>
Then we need to decide how much context is required for the user to understand the
update. If the entire live region must be presented for the change to make sense, assign
the
aria-atomic
attribute with the value of
true
to the HTML element.
Repeating unchanged information may become redundant or make it harder to distin-
guish what portion has changed. If you want to communicate
only
the change and that
change makes sense on its own, assign the
aria-atomic
attribute with the value of
false
to the HTML element:
<div aria-live="polite"
aria-atomic="false"
>
Finally, identify the type of update. Assign the
relevant
attribute to the HTML element.
The types of update are:
•
relevant="additions"
, where new nodes are added to the DOM
•
relevant="removals"
, where nodes are removed from the DOM
•
relevant="text"
, where changes occur to the text within existing nodes
You may assign multiple values to the relevant attribute by adding a space between
values:
<div aria-live="polite"
aria-atomic="false" relevant="additions removals text"
>
