ARIA Roles & Live Regions

[00:00:00]
>> Jon Kuperman: So outside of labels and descriptions, ARIA also provides roles, states and properties. So roles are really important and we've kind of discussed them a little bit before when we were making the div into a button by giving it a role of button. But these roles can be applied to any HTML element.

[00:00:15]
And here are just a few examples, but they can be like gifts of the role of button or checkbox or tree, banner, an autocomplete, or some button that has a popup. These are basically indications that speak directly to the screen reader. And the screen reader can kind of help guide the user.

[00:00:31]
So if you were in a situation where you had to make a custom checkbox, but they had checkbox functionality, these ARIA roles can go a long way with helping the screen reader tell the user how to expect to interact with this thing, like which hotkeys? Or is there text required to enter, or is it just an on off interaction, things like that.

[00:00:50]
ARIA can also be used in CSS, which is pretty cool. So these ARIA properties are very similar to data attributes in CSS. You can use them in your CSS selectors. So one really nice thing, like when you're building kind of like trees or navigation or something like that, you can have the ARIA roles saying which one is expanded or which one's not expanded.

[00:01:09]
So as a screen reader, user tabs through, it'll say first item, headphones not expanded, monitors expanded, whatever it is. And then you can use those same data tags, those ARIA tags in your CSS to do something like maybe display a little content arrow or something like that. So ARIA is completely interoperable with CSS.

[00:01:29]
Any ARIA attribute or role you apply, you can reach in CSS and apply styles accordingly. One of my absolute favorite things with ARIA and what our next exercise will be on, is this concept of ARIA live regions. And so this has become more and more true over the years that you have these applications that are extremely dynamic.

[00:01:49]
One use case that I often give is like, imagine you're using your Uber app to book a ride, right? There's all these different states and some of them require immediate user attention and other ones don't. So for example, your driver's 10 minutes away, now your driver's nine minutes away.

[00:02:05]
You don't really need to alert a user via a screen reader or assistive technology of that. Something has changed and it's worth having visually, and maybe it is worth announcing, but it's not vital, right? Whereas, your driver is here is an action that is extremely important. And from the visual side of the application, we often don't distinguish these things, right?

[00:02:26]
Visually we just change every minute that they get closer. We change when they're here, but we don't really call one out over the other one necessarily. Maybe sometimes we do, the ARIA spec provides this ability to mark elements as containing live data so that screen readers can read out updates as they come in.

[00:02:45]
So back to the Uber app, you could take a few different fields. You could take the minutes away, you could take the your driver is here field, and maybe you could take the we found a driver for you field, and you can mark all of those as ARIA live regions.

[00:02:57]
Meaning that when you use JavaScript to update those, like an API call comes in and you update it, the screen reader will interrupt what's currently going on and alert the user, hey, your driver's here now, things like that. So these are pretty simple, but pretty powerful APIs where you can build really, really cool, accessible experiences for big, dynamic applications.

[00:03:19]
One of the reasons Live Regions is one of my favorite APIs is because the property that goes into it is called politeness, which I find a really funny name for a setting. So basically you get three options. You make an ARIA live region and then you set either assertive, polite or off.

[00:03:35]
Assertive means interrupt whatever you're doing right now and announce. This, I think would be great for your driver is here, right, nothing else is as important as that. Polite would be maybe what you would use, announce it, but when the screen reader next idles. So if the screen reader's currently reading a paragraph, it'll wait until that paragraph is finished and then let you know.

[00:03:54]
So maybe keeping in our kind of Uber example, maybe this would be a good thing when your driver is one minute closer than they were before. Only if the app is idling, say, hey, now they're only seven minutes away. And then off, you can toggle these things to not read the update.

[00:04:07]
So maybe lots of different examples here, but maybe the user interacts in some way and says, okay, I don't care about that anymore, we could turn off these things. So you get this ARIA Live region, you pick the kind of politeness setting that you want, and then from then on, the screen reader will know to watch those areas and update by reading out the new value as updates come in.

[00:04:27]
So another example that we could imagine this is very good for is like imagine some sports application, right? And this keeps track of all your favorite teams and their matches and their scores or something like that. And people really like to watch these live in real time while the matches are going on.

[00:04:44]
And so you could imagine you have this app, this HTML and you have some JavaScript and the JavaScript's hitting an API or maybe it's got web sockets and it's getting pushed new information and then it's updating the UI. For a visual experience, it's very good as it is, but maybe you add some comes in big or there's an explosion or it comes in green and then it settles, something like that.

[00:05:04]
So how do we make an equally good experience for non sighted users, for people using screen readers? And you can think about ways that you could use live regions for this. So if you were to take those regions like where the scores are or where the latest news article is, or where the latest update is.

[00:05:20]
And you were to wrap those in live regions, like we can see at the top div ARIA Live polite, then that means that anything inside of there, when it changes, when the markup changes, the values will be read out loud to the user. So I think these are pretty creative.

[00:05:32]
You can start thinking of different combinations like maybe this is polite and this is assertive, or maybe the whole thing is assertive. Again, I think basically the ARIA bit here has the functionality that it has. And then it's up to you, playing with the JavaScript to change the DOM at the cadence that you want, with the values that you want.

[00:05:49]
And whatever you change it to, ARIA will read that.