Exploring the Power of ARIA Live Attribute in Web Accessibility
Are you building dynamic web applications without knowing about aria-live attribute?
If yes, then you’re missing out on the opportunity to inform your screen reader users about the dynamic changes happening on the page.
But wait a second, what are dynamic applications?
Dynamic applications are the ones that update the page content without reloading the webpage. A common example would be updating live cricket match scores, displaying success or warning alert banners, new chat messages, and many more.
Aria-live attribute enables assistive technologies such as screen readers to convey content updates to a screen reader user, improving the user experience by keeping them informed of the changes happening on the page.
Understanding ARIA Live Attribute
ARIA, or Accessible Rich Internet Applications, is a set of attributes that define ways to make web content and applications more accessible to people with disabilities. aria-live attribute is used to define regions of a web page that are live and should be announced by assistive technologies such as screen readers when they are updated or changed dynamically.
How ARIA Live Works
Imagine a scenario where a user is on Live cricket scores website. As the new score comes in, the content of the live score updates dynamically. Without ARIA Live, users relying on screen readers might not be aware of these updates unless they manually refresh the page or navigate to the live scores region. However, by implementing the aria-live attribute appropriately, developers can ensure that screen readers announce these updates as they occur, providing a more seamless and inclusive user experience.
Types of ARIA Live Regions
You can use the following ARIA Live attribute options based on the urgency of how dynamic content should be announced to users. These options include:
- aria-live=”off”: By default, it’s set to off. This value indicates that changes to the content within the region should not be announced by assistive technologies.
- aria-live=”polite”: With this value, changes are announced to the user after the current task is complete. Usually when the user is not interacting with the webpage, and this is useful for non-critical updates that won’t interrupt the user’s workflow.
- aria-live=”assertive”: This value indicates that changes are announced immediately, even if the user is in the middle of a task. It’s suitable for important updates that require immediate attention. Aria-live assertive behaves similarly to role=” alert” with the only difference being that a screen reader appends the word “alert” at the beginning. Note that an assertive announcement will interrupt a screen reader if it’s in the middle of reading text and will read the aria-live announcement. Whatever the screen reader had been reading will be truncated and will not automatically continue after the aria-live announcement.
Three ways to implement the aria-live attribute:
#1 Ensure that the aria-live attribute is present within the DOM and aria-live region is empty on page load, and you are simply using JavaScript to inject the content into the region with the aria-live attribute. This is one of the most common ways of implementing aria-live attribute. A screen reader will only announce the inner text when it recognizes a change to a live region, because of this aria-live is never announced on page load.
// an empty container with aria-live attribute available on page load
<div id="liveAnnouncementDiv" aria-live="polite"></div>
<script>
// jquery to inject dynamic content in the DOM
$('#liveAnnouncementDiv').text('Dynamic content here');
</script>#2 Toggle the display property of the region that’s within a container with aria live attribute. This is an extension of option #1 wherein the aria-live attribute is present with the text within the DOM on page load and we just need to toggle the display of the region from display: ”none” to display: ”block”. Make sure that aria-live is on the parent div and you’re toggling the display for the inner element containing text for it to work properly.
// Parent div with aria-live attribute available on page load
<div aria-live="polite">
<p id="liveAnnouncementP" class="displayNone">
New announcement text
</p>
</div>
<script>
// jquery to toggle display none to block
$('#liveAnnouncementP').removeClass('displayNone');
</script>#3 Using JavaScript to add aria-live attribute first and then inject the content after a slight delay. A delay will provide sufficient time for the accessibility tree to get refreshed and allow a screen reader to then read the injected content. Developers need to experiment with the duration of delay before injecting the text because the accessibility tree needs to be refreshed to register the newly added aria live attribute.
// an empty div available on page load
<div id="liveAnnouncementDiv"></div>
<script>
// jquery to add aria-live attibute
$('#liveAnnouncementDiv').attr('aria-live', 'polite');
// inject text after a delay
setTimeout(() => {
$('#liveAnnouncementDiv').text('Dynamic content here');
}, 2000); // you might need to experiment with the timing here
</script>Supporting aria attributes for aria-live
There are two supporting live region attributes that you should use when working on aria-live:
#1 Arai-atomic: Mostly used when you want the screen reader to announce the entire live region instead of just the section of the region that is getting updated. For example, you would want the screen reader to announce the updated score as India 125/3 in 23.5 overs instead of 125/3. Aria-atomic helps provide additional context for screen reader users. Possible settings for aria-atomic are true or false (default setting).
// Following example should announce the entire region
// as India 123/3 in 23.5 overs
<div id="liveAnnouncementDiv" aria-live="polite" aria-atomic="true">
<p> India
<span id="updateRunsSpan"> 123/3 </span>
<span id="updateOversSpan"> in 23.5 overs </span>
</p>
</div>#2 Aria-relevant: Another interesting attribute that enables us to control what types of changes we want it to announce. Do we want a screen reader to announce only the additions or removal of text or everything (all)? The most common use case is for the addition or removal of a member in a group chat, a screen reader user would appreciate being informed who joined/left the conversation.
// You can pass multiple options to aria-relevant attribute
<div id="liveAnnouncementDiv" aria-live="polite" aria-relevant="addition removals">
</div>Conclusion
Aria live attribute serves as a valuable tool for ensuring that dynamic content is accessible to all users, including those relying on assistive technologies. By implementing ARIA Live according to best practices and understanding its nuances, developers can create digital experiences that are not only functional but also welcoming and inclusive to users of all abilities.
Comment “yes” if you would love to learn about role=”alert”, best practices, and how it is different from aria-live=”assertive”.
