Check out a free preview of the full Website Accessibility course:
The "Exercise 5: 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:

In this exericse, Jon incoporates Live Regions for updating changes in a region of the

Get Unlimited Access Now

Transcript from the "Exercise 5: Live Regions" Lesson

[00:00:00]
>> Jon Kuperman: So, yeah, Exercise 5 is Live Regions. This one's a little bit JavaScript-y, but don't worry too much about, it doesn't need to be perfect, the JavaScript logic cuz it has to do with numbers or whatever. But basically, we kinda wanna do two things here. I'm gonna go over to my example.

[00:00:15] So we've got this ARIA example. Okay, so what we wanna do is we have this number 0 in the little box. And we want, first of all, the buttons to work, so like let's say as you increment and decrement them, they go up by one or five, or ten, something like that.

[00:00:28] So from 0 it go like 10, 20, well, dictionary. And then back down to ten or something like that. So first we wanna implement that working, and then what we really wanna do is then we wanna add a ARIA live region to this, and play around with your screen reader between polite and assertive.

[00:00:44] So not only is the number changing here, but it's actually getting announced in. And you can play with things like labels the new value, or just announcing the number, 10, 20, 30 and kinda seeing those different experiences there. So, we'll take like a ten minute break to do these, and then I'll cover them all together.

[00:01:02] And I think they're in the answers branch too if you wanna move ahead on it. But basically the idea of getting to really play with the ARIA live regions, and seeing how you're listening to something, and how it comes in.