WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications, often referred to as simply ARIA) is a technical specification created by the World Wide Web Consortium (W3C).
ARIA provides additional information about certain web elements that cannot be communicated through native HTML/XHTML. Proper use of ARIA helps you provide a good experience for users who use screen readers (software that outputs text as audio or braille) and other types of assistive technology (AT).
The aria-live attribute indicates that an element will receive updates, which enables AT to output those updates to the user. Many developers misuse the aria-live attribute, particularly when using ARIA regions that change the aria-live value.
Below, we’ll explain the basics of aria-live and provide some tips for avoiding common issues.
What is dynamic content, and why is it important for accessibility?
Many modern websites have dynamic content, which updates without reloading the page. Those updates are usually prompted by user behavior.
For example, if your website has a list of your business’s physical locations, a visual map might show details about a specific location when the user clicks on an address or enters their zip code.
Shopping carts are another example. If a user adds an item to their shopping cart, the content on the page changes — but the page may not refresh.
When dynamic content changes, users need to be informed. For visual users, this is usually fairly straightforward: The shopping cart icon might change to show “1 item in cart,” for example.
However, not all users can perceive content visually. Many people with vision impairments use screen readers, and native HTML cannot always inform these users of dynamic changes.
WAI-ARIA can be used to alert these users of important changes — and to give them access to less important changes without disrupting the user experience. That’s where live regions come into play.
Related: 5 Tips for Using ARIA to Improve Web Accessibility
How do ARIA live regions work?
ARIA live regions provide context about simple content changes that aren’t interactive. The global aria-live attribute tells AT that the element may receive updates, along with key information about those potential updates.
When used properly, the aria-live attribute can inform screen readers about changes to content without disrupting the user experience. However, when used improperly, aria-live can annoy users by delivering updates too frequently.
To address this issue, the aria-live attribute has three possible politeness settings:
- aria-live=”off" — This is the default setting. You shouldn’t need to declare aria-live=”off" unless you’re using an ARIA role that has an implicit live region attribute (we’ll explain more about those roles in a moment).
- aria-live=”polite" — This setting tells the screen reader to provide updates when the user is idle.
- aria-live=”assertive" — This setting tells the screen reader that the information is critically important or time sensitive.
Normally, you’ll only use aria-live=”polite" unless you really need the user’s attention. For example, if their session is about to timeout, you might need to send an assertive announcement.
Some ARIA roles are implicit aria-live regions
Certain ARIA roles act as live regions by default, and certain roles have an implicit value of aria-live=”off”.
It’s important to remember that screen readers don’t always interpret ARIA markup the same way. You may need to change the aria-live setting or add a redundant aria-live attribute to certain roles to ensure that they work with as many assistive technologies as possible.
You might also decide to explicitly declare aria-live=”off" for a certain region if announcements of content changes are disruptive to users. Use caution when taking this approach: ARIA regions have an implicit aria-live setting for a reason. If you change the setting, some users may not understand your content.
Regions with an implicit aria-live attribute include:
- alert - Used for important, time-sensitive information. The alert role has an implicit value of aria-live=”assertive.”
- status - Indicates that a region contains information for the user, but that the information isn’t important enough to use the alert role. The status role has an implicit value of aria-live=”polite.”
- timer - Indicates that an element is a timer. The timer role has an implicit value of aria-live=”off.”
- log - Indicates a live region where new information is displayed in a meaningful order. Old information may disappear. The log role has an implicit value of aria-live=”polite.”
- marquee - Indicates a region with nonessential information that will change frequently. The marquee role has an implicit value of aria-live=”off”
To learn more about each role, visit the Mozilla Developer Network (MDN) reference guide to ARIA live regions.
Related: What Are the Three Types of ARIA Attributes?
Always test your WAI-ARIA markup carefully
Remember the first rule of WAI-ARIA: If you can use native semantic HTML/XHTML instead, you should always do so.
WAI-ARIA is a powerful tool for inclusive design, but improper markup can introduce serious accessibility barriers. Test your content carefully before publishing any changes.
We strongly recommend working with an accessibility partner when implementing dynamic content. Subject matter experts (SMEs) can help you avoid common issues, and experienced screen reader users can help you provide the best possible experience for your audience.
For guidance with a specific ARIA issue, send us a message to connect with an SME.
