Live Regions & ARIA Exercise

[00:00:00]
>> One of my favorite ones is live regions, another part of the ARIA spec. So you can kind of imagine, a lot of the apps we're building are very dynamic, right? They're not just a flat page with flat content on them. And so for these cases, it's a little bit tricky.

[00:00:15]
So we've seen the screen reader just kinda read the whole page aloud. And we've seen the screen reader navigate through the page like, let me see all the links, let me see all the headings, let me find a form. But what about applications where something updates and you kinda need to catch the attention of the user?

[00:00:29]
For example, a sidebar loads in, or you have a notification, or somebody leaves a comment on your post or something like that. Or the Uber app is a really good example, right? So you're on the app and there's a button that says book ride, and so the screen reader reads that out.

[00:00:44]
You're like, okay, hit the button, it looks the ride. So the status is waiting for a driver, something like that, or waiting for a ride, I don't know. But at some amount of time, totally undetermined, it'll change to driver en route, ten minutes away, right? And if one of the users already passed it, which they almost certainly will be, how do you alert the user that something's changed?

[00:01:05]
And so to do that, we have ARIA live regions. They're, again, very easy to implement. You can just put ARIA live on something. And then whenever the inside content of that HTML element changes, it'll reread it aloud to the user. And we've got two choices when doing this.

[00:01:24]
This is one of my favorite APIs in all of web. The value for ARIA live is called the politeness setting. I just really like the name of that. So you can either pass in assertive or polite. You could pass in off, but that's the same as just not adding it.

[00:01:40]
So assertive means no matter what the screen reader is doing, stop it and announce that an update has happened here. Polite means let the screen reader finish, and the next time it hits an idle cycle, announce it to the user. So you can kinda use that at your own judgment.

[00:01:54]
If your ride is here, that's probably the most important thing, so go assertive. If some content is loaded or maybe they have a notification, I would probably make that polite. So they can finish reading the current posts before they hear about the notification. So these have a wide range of uses.

[00:02:11]
Some folks go a little bit overboard with them, cuz you gotta remember that this is an interruption, for sure it's an interruption. So I would say only use it when an interruption is necessary, worthwhile, that kinda thing. But I really like the polite setting where you can just kind of think of it as a cue almost.

[00:02:27]
And you're like, hey, next time, the screen reader is done, let the user know they have a notification or they have a new comment or something like that. For any important things, you have your ride is here or, I don't know, the shopper is checked out, anything like that for these modern apps, assertive can be a lot better.

[00:02:45]
So what I've done here for exercise three is we've got this number here and it's incrementing at a semi-random interval, right? Because it's basically like you've made a viral post and it's getting very popular. Endorphins should be going. So this is in 3.html, and the exercise is, can you use live regions to control this area?

[00:03:08]
And then to turn your screen reader on and listen to it as it comes in. And then if you would like, notice how the difference between polite and assertive kinda changes the experience. So yeah, so we can take a quick break here. And then when we come back, we'll kinda go over it together and we'll play with the screen reader to kinda listen to it.