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.
Off
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.
Polite
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.
Example:
<select>
<option>...</option>
<option>...</option>
<option>...</option>
</select>
<ul aria-live=”polite”>
<li>result one</li>
<li>result two</li>
</ul>
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.
Assertive
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.
Example:
<div class=”warning” aria-live=”assertive”>
Important information, like weather emergencies or power outages.
</div>
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.
