Announcements with ARIA Live Regions

[00:00:00]
>> Marcy Sutton: So let's move on to our next topic. We've talked about focus management in two different ways with drop downs and client side routing. By using focus management and sending focus to an area of the screen, we move the user's focus there and make Announcements. So, that skip link that I sent focus to should announce to a screen reader skip to navigation when they land on it.

[00:00:24]
Sometimes you don't want to move the user's focus. Like maybe you're typing in a form and there's no submit button because it's slicker to just save, maybe it's just Asynchronously saving to the server. Well you don't want the user to worry that they are gonna lose their work.

[00:00:40]
So you'd probably display something like saved or you've made changes like CodePen will do that. When you are typing and it will say 13 changes since your last save. You wanna announce that message to your screen reader and the techniques to do that is with Announcements. Some other use cases would be like if you had a Combobox, and you are typing and it's filtering a list of options.

[00:01:04]
We'll see an example of that in a second. Things like Chat widgets, like on Facebook. They're a little Chat widget, which there's multiple. Which I heard a kind of funny bug I'm going to tell you about. That they had an Announcement on those to say what time the last message had been sent.

[00:01:20]
And it had kind of gone rogue cuz it was saying like one message one minute ago, two minutes ago, one minute ago just like launching off these Announcements. So you want to make sure you test them with assistive technology running because you might have no idea otherwise. Because these Announcements only affect assistive technology.

[00:01:38]
Which is why I touched on focus management first because that impacts everyone that uses a keyboard. And we can do a lot with that, especially for screen magnification. If you send focus to an area, your focused on it, you're sent to that part of the screen. But if I make an Announcement like a toast notification elsewhere on the screen, someone who's zoomed way in over here won't necessarily see what's happening on this side.

[00:02:03]
So you want to be sort of subjective about how you do this. I've also seen these Announcements used for title changes like instead of the focus that we've just worked on. So you can use it for various things, I think the Asynchronous saving and filtering is probably the most recommended ways.

[00:02:20]
So to create these announcements you can use ARIA in the Live Region portion. So it's basically like a Message command center and there is two levels of importance. Do you interrupt what the screen reader is saying or do you wait. And so those levels are indicated in two different ways.

[00:02:40]
There's sort of two APIs you can use for this. So the role of status and role of alert. I think there's a role of log as well. The role of status is what we call a polite announcement. It will wait until everything is done announcing before it says something.

[00:02:55]
Which is a bit more polite, good to wait, not everything is an emergency. Or as an alert is like hey, you need to know this right now, like this is urgent. And so, it's again kind of subjective, so role of alert will do that. You can also use the ARIA Live property.

[00:03:12]
So ARIA Live of polite or ARIA Live of assertive. I think ARIA Live of assertive used to be called rude. If you had to think of it that way, it can be kinda rude. But you can use either one of these. Sometimes maybe if ARIA Live isn't behaving right you can try the role see if that changes things.

[00:03:30]
But those are pretty synonymous role status and polite, role of alert and assertive. So an example that you can find out in the wild is the Downshift component by Kent C Dodds and open source community. I've got an example here with a Star Wars character filter, and I can tab into it.

[00:03:49]
I could type in these names of characters and they get pulled back from this list. And I'm going to fire up Voiceover using cmd+F5. Okay so I've got Voiceover running. I'm gonna start typing.
>> Speaker 2: Six results are available. Use up and down arrow keys to navigate. Han Solo (1 of 6), Bastila Shan (2 of 6).

[00:04:13]
N for A, 18 results are available, use up and down arrow keys to navigate. Press Enter key, F5, VoiceOver off.
>> Marcy Sutton: So it's making those announcements of how many items are coming up. And that information it's not the label of the input. Like my focus is there. I don't wanna move your focus because you're actively typing.

[00:04:33]
So this is a perfect use case for an ARIA Live Region. And Downshift does this pretty well. It's open source, and so if you ever find bugs and things. This is a great way to create accessible components is because we're all testing in different browsers and different assistive technologies, and we can kinda crowd source that and make one really great component.

[00:04:52]
And I think Downshift is a good example of that. So some tips of Live Regions, including multiple Live Regions of a given level can help sometimes when the screen reader doesn't consider the content has changed. And I guess a little more note about how these APIs work is that these are elements that when you append text to them, It will just announce it.

[00:05:19]
So typically, they're visually hidden. They're kind of put off screen. And if you append text to them, however means necessary in React maybe. It's some state variable that if it's truthy, it'll output that's what I'll play within a minute. Maybe with vanilla JavaScript, you just set its text content or you append a child or some way to like change the contents of these elements.

[00:05:44]
When the role of status or the ARIA Live, those Regions are there when the page loads, the children that you append to them is what will actually get announced. So you wouldn't like add an ARIA role of status to an element like while the user is interacting. That's something that's always there pulling for changes from load time.

[00:06:04]
So sometimes you might hit these gotchas where it just for whatever reason the content's the same and the screen reader's trying to help you by not repeating the same thing over again. But maybe it's causing you issues. Sometimes making an API or a custom component where you have multiple regions and you just kind of trade off, that's a technique that I've seen used.

[00:06:26]
There's an example of this in Almero Steyn's React ARIA Live component. He took inspiration from an Angular solution called ng-alley that was an older component. And that's just things that people who are actively doing accessibility testing have run into. This is another area we're having a site-level API to manage these announcements might help so that you have more control over what's happening.