Skip to main content

Aria-Live for an Accessible Web

10-19-15 Marshall Norman

Not all content on your site is created equal. Marshall shares how aria-live can help you bubble up the right information for visually-impaired users and downplay the rest.

We all have that friend. The one who posts way too much on social media. The one who always interrupts you when you’re trying to tell a joke. We all appreciate these friends as people. But man, sometimes you just need them to ease off the talk box and let you focus.

Now imagine that you’re having an audio conversation with a website. It’s telling you things you need to know when all of a sudden, the Twitter feed flashes and your conversation is interrupted by @interruptingcow saying “MOO.” Sounds pretty not-fun, but it’s the reality for visually impaired users on every site that throws a Twitter feed into a random location on the page simply because someone thought it would look hip.

Users who browse a site visually can easily see this as fluff they don’t care about, but visually impaired users don’t have that luxury. Enter aria-live. A wonderful property that allows us to tell our websites which voice should have priority while speaking to our users. So we can prevent @interruptingcow from interrupting more relevant content.

We are provided three levels of priority: off, polite, and assertive.


This is the default state. Screen readers will ignore this area until the user interacts with it.

It is important to remember this. The default state being off means we don’t need to go slinging aria-live properties all over our site. Keep in mind that aria-live exists to help us guide users to the content they want according to how they’re using the site.


The aria-live=”polite” setting placed on an element will tell the screen reader to not read any updates or changes to the specified block until the user seems to have finished interacting with the site.

This is a good technique to keep in mind when building something like a form that automatically updates other parts of the interface, or a list of items that are getting filters applied to them.


<ul aria-live=”polite”>
  <li>result one</li>
  <li>result two</li>

Applying aria-live=“polite” here will tell screen readers to wait until the user has finished interacting with the menu; then it will tell them what has changed below it.


aria-live=”assertive” will tell screen readers to notify the user no matter what when a particular region is updated with new content. This could be used when there is a warning on a site for an error or perhaps weather information.


<div class=”warning” aria-live=”assertive”>
 Important information, like weather emergencies or power outages.

So Many Ways of Looking at the Same Thing

It was described to me once that a person using a screen reader experiences the web in one dimension. There is no up/down/left/right/in/out. Aria-live helps us compensate for this by suggesting the right focus for visually impaired users as they navigate our dynamic websites.

Related Content

User-Centered Thinking: 7 Things to Consider and a Free Guide

Want the benefits of UX but not sure where to start? Grab our guide to evaluate your needs, earn buy-in, and get hiring tips.

More Details

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development