How and why to use aria-live
Yesterday, we talked about screen readers (and why you should use one).
What happens if you have a piece of content that changes dynamically on your page? How do screen readers let the user know that content has changed?
For example, imagine you had an input for users to type their name. Below it, you have an element that displays “Hello {user’s name}!” in real time as they type. How does a screen reader user know about the message in the #app element?
<label for="name">What's your name?</label>
<input type="text" id="name">
<div id="app"></div>Generally speaking, screen readers will not notice or announce those changes unless you tell them that they need to.
The aria-live attribute let’s screen readers know that content in a particular element is going to change dynamically, and that they should pay attention to it and announce those changes.
It’s value can be set to off (the same as not using it at all), assertive (in which screen readers interrupt user actions to announce changes), and polite (which tells the screen reader to wait until the user is done to announce updates).
Generally speaking, we should always use polite.
If we update our HTML to look like this, now screen readers will announce changes to the #app element’s content.
<label for="name">What's your name?</label>
<input type="text" id="name">
<div id="app" aria-live="polite"></div>