Live Region Roles

Back to Overview
00:00 --> 00:03
Pretty straightforward, right?

00:03 --> 00:10
Live region roles are part of the user interface that is announced to screen reader users.

00:10 --> 00:17
And this is a relative complex, like this could be a whole how to do live regions, could

00:17 --> 00:23
be a whole talk by itself.

00:23 --> 00:28
And actually I did do a talk about that a year, about a year ago.

00:28 --> 00:34
And I will make sure to link to the slides in the description for this.

00:34 --> 00:46
But there's not a lot of value to go in there and describe all of the live regions in detail.

00:48 --> 00:56
What live regions do is that they basically put stuff in there, like you have a div or paragraph or whatever you have.

00:57 --> 01:04
and it has a live region role, like role status, that would be the most common one.

01:05 --> 01:10
And you put in, with JavaScript, you put in text.

01:11 --> 01:16
And that text would be read to the screen reader user without any modification,

01:16 --> 01:19
without any navigation possibilities.

01:19 --> 01:24
That text is right directly moved to the screen reader user,

01:24 --> 01:32
And that's super useful for things like, oh, you've got a new chat message or things like the website has finally loaded.

01:32 --> 01:35
The JavaScript has finally loaded, stuff like that.

01:35 --> 01:36
You want to do that.

01:37 --> 01:43
There's also an alert role that gives you immediate feedback.

01:43 --> 01:46
So alert will interrupt the screen reader at that time.

01:46 --> 01:48
So you shouldn't use that.

01:48 --> 01:52
And then there's log marquee and timer, which I have never used.

01:52 --> 02:07
in practice. They have their use cases, but they are like rare and they also are like,

02:07 --> 02:14
some of them don't even like announce by default. You have to set some settings there. So I

02:14 --> 02:20
think alert and status are the most important things here.

02:20 --> 02:26
And that brings us to the end of our regions. That was pretty straightforward.