Learn how HTML5 ARIA live works!
In this tutorial, we want to notify users when parts of the web page are dynamically updating. It is a great tool for making your web pages accessible. We achieve our goal by using HTML5 aria-live attribute.
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 do not need to specify attributes:
The standard live region roles include:
If you need something other than the standard ARIA live region roles and behaviors, you can create a custom live region.
Stay away from aria-live="assertive" unless it is 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 join, 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:
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 tell apart 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:
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">
In fact, the default behavior should be relevant="additions text". This reflects the most common type of changes.
ARIA live regions provide a standardized way to alert assistive technology that a DOM change has occurred and tell it how to handle the change.
You may also prevent updates from being announced until all of the changes in a live region finish updating by changing the live region’s state. You do this by dynamically setting the attribute state (aria-busy="true") and then clearing it when the updates are ready to be announced. This might be useful when multiple updates in a live region need to be announced together to make sense.
Here is the list of other related tutorials that are highly recommended:
Here is the list of classes that are highly recommended:
Click here if you wish to learn more about training and career options available in the IT industry.
We offer private custom tutoring classes both online and in DC, MD and VA for almost all of our courses or bootcamps. Give us a call or email us to discuss your needs.
$50 Limited OfferREGISTER NOW