This course has been updated! We now recommend you take the Website Accessibility, v2 course.

Check out a free preview of the full Website Accessibility course:
The "Live Regions" Lesson is part of the full, Website Accessibility course featured in this preview video. Here's what you'd learn in this lesson:

Jon describes how to code Live Regions in order to tell the browser that an area of a browser will be updated frequalty.

Get Unlimited Access Now

Transcript from the "Live Regions" Lesson

>> Jon Kuperman: This one we kind of hinted at earlier about live regions. Basically, you have these sites that are really interactive. And let's say you're clicking buttons and the buttons are changing a text field, or it's some kind or game, or it's some kind chat conversation. And when they start chatting, you get a little so-and-so is typing notification, things like that.

[00:00:19] So by default, the screen reader reads the screen and then you're kind of left up to your own devices as you're interacting with it. It reads everything that's going on, like an empty chat box. And then it tells you that you're on a text field for typing, so you know what you're saying and you hit Enter and you hope it's sent.

[00:00:38] But Aria live regions are great, cuz we can tell a screen reader that a certain area is going to be updating frequently, and that it's important that what happens in there gets spoken to the user. So they're really good for, I mean, chat would be big. I have a contrived example that we're all gonna do together, but the basic idea is any region of your site that demands special interest, special focus, and it's going to be updating.

[00:01:02] Can you just get marked with aria-live? So aria-live, there's aria-live and aria-relevant. So aria-live is just the mode, like I was talking about before. So by default it's off. But you can have polite or assertive mode. And so this is basically like the screen reader's kind of API, where if you're in polite mode, the screen reader will wait until any other pertinent information that it's already saying is done, and then give you an update.

[00:01:29] But if it's in assertive mode, as soon as that live region updates it's going to be telling you, somebody chatted hello or that kind of thing. And then aria-relevant is getting you a little bit more fine grain. This one's not always necessary. But it's just a little bit more finding control into what types of changes should we be letting the user know about.

[00:01:47] So you could do additions, like DOM Node additions,, removals, a text change, or all sorts of changes. Again, so for chat you'd probably just want maybe, I guess you could go either way. You wouldn't want deletions, but you'd probably want a text change, yeah?
>> Speaker 2: Question from Drew, hitting space when a button has focus will click it.

[00:02:08] If you assign another element, a rollover button, will it inherit this behavior?
>> Jon Kuperman: Right, that's a great question. Okay so yeah, roll will not mess with function, won't give it any functionality. Roll is just changing how the screen reader will identify it. So then if you have a span role of button, like a span you're trying to turn into button, you'd need to add an on key down listener.

[00:02:30] And then, in that listener, see if space was the key that was hit down, and then do something.
>> Speaker 2: Okay, Victor, another question. In a single-page app where you show a loader while data is fetching, then show the app once it's ready, how would you use aria roles there?

>> Jon Kuperman: So I don't think that, well, yeah, so it's not so much about roles as much as that plays really nicely into maybe some of the live regions stuff that you could do. So you could have the area where like say, you have a little side bar widget that loads.

[00:03:02] You could have additions and removals marked as aria-live over there. And so then the screen reader, I mean okay, so let's actually take a second to think about it because, it's like, how important is it that when that content loads in, that it gets announced, right? So if it's the main content of your app, then it's very important.

[00:03:20] So you'd want to put an aria-live region on it. So that as soon as content loads in, the screen reader starts reading. If it's like a sidebar element, it might not be as important to put live on it, because you probably don't need that sidebar information interrupting the flow of your content.

[00:03:38] So I think it's again, just a little bit subjective in the sense of thinking about what work flows could possibly happen. If it's like your whole app is in a loading spinner, then I say yeah you just wanna mark it as a live region so it gets announced when it comes in.

[00:03:53] If it's something kind of tangential, and you don't do anything, I guess there's the danger of, I mean, I would give it some kind of label, so if someone tabbed over to it, it would be like, current stock prices loading, or something like that. But you might not wanna have an aria-live on it, cuz you might not want a sidebar widget to announce in.

[00:04:12] You could again, maybe split the difference and go with polite as an aria-live region. So that way, if it's doing something else, that's fine. But when it gets loaded, it at least gets added into the queue to be announced. I'm not sure, Jack, if you have any other suggestions on that.

>> Speaker 3: Yeah, I mean certainly all of the things that you've said are good things to consider. And to your point, sometimes the answer is it depends on how you've structured your UI. I think that, I'm just trying to think if. The aria-live, well I think either way, when the content updates, you just wanna make sure that the accessibility tree is getting updated.

[00:04:56] So that the contents that has now loaded later is actually getting pushed into that tree, so that a screen reader or other assistive technology would see it.
>> Jon Kuperman: Yeah, yeah, so I think, yeah, I think it definitely depends. And I think it's just like knowing what tools you have available, right?

[00:05:10] So you can do nothing with a good label that says stock information, it's still loading, wait a minute, or something like that. You can have it interrupt and announce, or you can have it announce later, and kind of choosing what's right at the time.
>> Speaker 2: Victor has a follow-up question.

[00:05:25] So do screen readers pick up changes to the value of the aria-live attribute?
>> Jon Kuperman: Screen readers announce the value of the aria-live attribute as it changes. So if you have aria-live hello, and it's aria-relevant all, and then use JavaScript to change hello to goodbye, aria-live will announce. That's specifically what it does.

[00:05:49] Hope that answers it. Victor, let me know if that didn't answer the question. And then, and so it is announcing, and it's specifically what it does, and then polite or assertive is kind of like when it announces it