What Are Accessible Live Regions, and How Do I Use Them?

According to an analysis from WebAIM (Web Accessibility In Mind), ARIA (Accessible Rich Internet Applications) usage has nearly quadrupled since 2019. 

That means that more developers understand the importance of digital accessibility, but it doesn’t necessarily translate to better online experiences for people with disabilities. The vast majority of websites have serious accessibility issues, and adding ARIA doesn’t always help — particularly when it’s misused. 

The first rule of ARIA is simple: Wherever possible, don’t use ARIA. Semantic HTML is a better tool, as it’s much more widely supported. 

However, there are some cases where semantic HTML isn’t sufficient, and in those cases, ARIA is essential. One example is ARIA’s aria-live attribute, which ensures that dynamic content updates are communicated effectively to assistive technology users.

Dynamic Content and Accessible Live Regions

Many modern websites are teeming with dynamic content updates. Content is dynamic when it changes without refreshing the page, which might occur as new information becomes available or when the user takes a certain action. 

A few common examples:

• Shopping carts that change as you add items. 
• Real-time chat applications where messages pop up instantly.
  News feeds with refreshing headlines. 
• Status indicators that let you know your form submission was successful. 

These changes are visually apparent to sighted users. They’re less apparent for people who use screen readers; depending on the site’s markup, they might miss the dynamic content entirely, or they might hear it announced out of order.

To put that another way: Imagine trying to follow a live sports game on the radio without the announcer ever mentioning the score. That would be a frustrating experience — and that’s where ARIA comes in.

Related: 4 Questions to Ask Before Using ARIA

ARIA Live Regions and Accessible Dynamic Content

ARIA’s aria-live attribute alerts users to changes in content without taking too much control from the user. This is accomplished by setting the “politeness level" of the attribute.

Politeness determines how urgently screen readers should interrupt their current flow to announce updates. 

• aria-live="off" (default): No announcements are made unless the user specifically navigates to the updated element. For example, you might use “off" for a carousel (otherwise, the user might receive too many announcements). 
• aria-live="polite": This setting announces updates when the user is idle and not actively engaged in another task. It's ideal for status messages, notifications, and other non-urgent information.
• aria-live="assertive": This is the "breaking news" alert, designed for high-priority, time-sensitive updates that demand immediate attention. Use it judiciously for critical alerts and error messages. 

As always, it’s helpful to think about the actual user: Do they absolutely need to hear the alert as soon as it appears? If so, “assertive" might be justified — but generally speaking, you’ll use “polite" for most elements.

Related: What Is An ARIA Label?

Avoid Mistakes with ARIA Accessible Live Regions

We strongly recommend working with an accessibility partner when using ARIA markup. Some ARIA mistakes can make your website unusable with certain assistive technologies, and if you’re not testing your content with a variety of screen readers and web browsers, you may not realize that you have a serious accessibility barrier.

With that said, some aria-live mistakes can be avoided by following some basic tips:

• Don’t overuse aria-live. If content isn’t dynamic, you don’t need aria-live. 
• Don’t use the “assertive" politeness setting unless you absolutely need to get the user’s attention for a time-sensitive issue. 
• Remember that some ARIA regions (such alert, status, timer, log, and marquee) have an implicit aria-live attribute and politeness setting. For more info, read the Mozilla Developer Network (MDN) reference guide to ARIA live regions.
• Even with perfect markup, testing with various assistive technologies is crucial. Screen reader behavior can differ, and real-world user feedback is invaluable. 

For guidance with a specific ARIA issue, send us a message to connect with an SME.