Live Regions

[00:00:00]
>> ARIA, like all this really cool stuff with labeling and rolls, there's another big topic within it that I think is some of the coolest parts of ARIA, and that's what's called Live Regions. So Live Regions are made so that screen reader users can be informed that things are happening on the screen without moving their keyboard focus.

[00:00:23]
Imagine you're typing in a form text area, and it auto saves, and there's a toast notification that when you pause that says, saved, and you're like, cool, okay, I can kinda relax a little bit. I'm not gonna lose this opus that I'm writing if something happens, my page refreshes.

[00:00:42]
If you can't see that toast, it's elsewhere on the screen, and we don't wanna move the user's focus cuz they're flowing, we don't wanna disrupt the writing process. How is a screen reader user going to know that there was a notification? Well, there's a thing called Live Regions that make it really easy to just pipe a message to the screen reader without moving the focus at all.

[00:01:07]
So there's a few different ways that we can set these up, and these Live Regions are helpful in many different contexts. Including client-side routing, which we will also talk about, and enterprise accessibility, but we can set Live Regions with two major levels. So there's assertive and polite. I think assertive maybe even was called rude, at one time, because it will interrupt everything else.

[00:01:34]
So if you have other announcements, polite will wait and kind of slot into the queue of announcements until other things are done. Which for a lot of things, is appropriate, but for things that are time sensitive, like you are going to be logged out automatically, or alert, I guess alert would move focus.

[00:01:53]
But we sometimes need different settings for different things. So assertive and polite. So there's different ways to set Live Regions. There's a role of status, a role of log, a role of alert. Those are all the more polite, chill versions of this. The more interrupty ones are, I guess, role alert will interrupt, and the assertive.

[00:02:21]
So there's roles and aria-live attributes. aria-live-polite is similar to role-status, role-log. aria-live assertive is the same level as the alert, the assertive. So those will interrupt. And these act as a message center. So any element that has these roles or aria-lives on them, if you append any text to that element, it will automatically read it.

[00:02:45]
And we're gonna go add one to our product page. So you can put a CSS class on these so that they are rendered and they are read aloud, but you don't see them. So the screen reader only class or visually hidden class, kind of a best practice to like, these aren't usually visual content, they're for screen readers.

[00:03:09]
So to test them, the only real way to test this is in a screen reader. So here's one case. We had some questions, understandably, about how often do I need to test screen readers? If you're writing a Live Region, you kind of have to go, otherwise you're never gonna hear the output.

[00:03:28]
So that is one type of use case or feature that you will be firing up the screen reader for. But a lot of the times, I think testing it in VoiceOver seems to be sufficient, yeah, if you can test it on Windows, that would be helpful. So there was a question around this topic that I saw about, can you play a sound with a Live Region?

[00:03:53]
I think potentially you could, but I don't think you'd want to. I think the sound could interfere with the text content since there's an order. I mean, talk about you have to either interrupt other texts or it has to wait in a queue. So I don't think you'd wanna interrupt anything with a sound.

[00:04:14]
I guess if that was a really compelling idea for your product, go test it with people. Create a prototype, see if it'll work, for one, see if it annoys the heck out of people like I think it would. [LAUGH] So the big cautionary note with Live Regions is don't overdo it.

[00:04:35]
If divs are annoying, Live Regions can be really, really annoying cuz they talk at you. And my favorite anecdote of Live Regions is that there was a chat widget on a major social media site that there could be multiple instances of the chat widget and it was just automatically announcing the time.

[00:04:53]
5 minutes ago, 10 minutes ago, 30 minutes ago. Where's that coming from? It's from the chat widgets. So the automatic announcements can go awry and end up being less helpful than we think they would. So we wanna use this sparingly.