Live regions are used to ensure that dynamic changes to page content are announced to users who might not be able to visually see the content change.
Certain ARIA roles (alert, log, or status) or the aria-live attribute are used to create live regions. This will programmatically identify parts of a page where content may change dynamically.
...
| Warning | ||
|---|---|---|
| ||
Screen readers maintain a message queue for live regions. “alert” or "assertive" items take priority over “status” or "polite" items. Some screen readers will clear the queue after announcing an alert or assertive item. |
role=“status” / aria-live="polite”
Status live regions announce updates "at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing", according to the WAI-ARIA specification.
These live regions are appropriate for notifications that are important but do not require the user's immediate attention.
...
A newspaper website updating headlines.
role=”alert” / aria-live="assertive”
Alert live regions announce updates immediately.
...
The announcement will interrupt the user in their current task, and
Other queued announcements may be cleared when an assertive item is announced.
aria-live="off”
Live regions with aria-live="off" should only announce updates if keyboard focus is currently on the element being updated.
...
Additional ARIA Properties
aria-atomic
Live regions with the aria-atomic attribute set to true will announce the contents of the entire region, even when only part of the content has changed. (i.e. All descendant nodes are always presented together).
...
In the above example, both the "Current temperature" heading and the temperature value would be announced. If aria-atomic was set to false, only the temperature value might be announced, leaving the user confused about why the announcement was made or what the information meant.
aria-busy
If the content in a live region may take time to fully update (e.g. if a JavaScript function takes time to execute, or if the region is updated in multiple parts), the aria-busy attribute can used.
...
Note that aria-busy is not supported by all browsers and assistive technology, but can provide a benefit for users of technologies that do support it.
aria-relevant
Do not use the aria-relevant attribute. The attribute is not well supported by assistive technology. Generally, there is no need to change the default settings of aria-relevant.
...
User agent and assistive technology support for roles that are implicitly aria-live is still not 100% (as of early 2019). With the exception of aria-live="off", the above roles should be used in combination with the corresponding aria-live attribute (e.g. <div role="alert" aria-live="assertive">). Once support improves, the aria-live attribute can be removed from elements with live region roles.
| role | aria-live | aria-atomic | description |
|---|---|---|---|
| status | polite | true | Updated information about the user's or application's status. A user is notified via the screen reader when messages are added. Updates to the region will result in the screen reader presenting its entire contents to the user. |
| alert | assertive | true | Important, possibly time-sensitive, information. Errors or warning messages, client side validation notices, etc. A user is notified via the screen reader immediately when messages are added. Updates to the region will result in the screen reader presenting its entire contents to the user. |
| log | polite | false | Informs user when content has been appended to sequential information (e.g. chat, error, history, etc.). A user is notified via the screen reader when messages are added. |
| marquee | off | false | Presents non-essential information that changes frequently (e.g. stock ticker). The difference between a marquee and a log is that logs usually have a meaningful order or sequence of important content changes. |
| timer | off | false | Presents a numerical counter indicating an amount of elapsed time remaining or since a start point. |
Unfortunately, using roles in combination with their corresponding aria-live attributes may have a negative effect on browser/screen reader combinations that fully support live region roles. This page will be updated when support is more consistent.
How to use a Live Region
| Warning | ||
|---|---|---|
| ||
Only changes to a live region are announced. The region must be present (ideally on page load) before an update to the region can be announced. |
Ensure the live region is already on the page when the page loads.
...