HTML and CSS Reference
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
<div aria-live="polite" aria-atomic="false" relevant="additions removals text" >