ARIA Labels & Roles Exercise

[00:00:00]
>> Jon Kuperman: For this next exercise we go back to our site and we've got exercise for ARIA labels and roles. And I have made a very silly and contrived and loosely UK football related maybe application. The basic idea here, you don't need to get too much into the source code for it, but it's got all these different games and on a timer they update with some random things come in.

[00:00:24]
It shows you when the last update came through, if you run out of updates because they're hard coded, feel free to just refresh the page and it'll start back over again at the beginning. But yeah, so basically you've got this app here visually it works pretty well. As events come in, the scores update and the event gets written here.

[00:00:42]
And what we want to do for the exercise is start with the screen reader on, give it a refresh, a score updates every 15 seconds. Give it 15 seconds and notice that you don't get any kind of auditory notification that it's updated. And from there we'll go into the HTML and play with live regions on different elements and with different politeness settings and see if you can come up with what feels the best kind of workflow for you.

[00:01:06]
What you wrap, what you don't wrap, what you give polite to, what you give assertive to when you turn things off, all sorts of things like that. So the pages here under ARIA, the code again is like 100% contained in this HTML. You can largely ignore all of this JavaScript, I mean, feel free to read through it, but the JavaScript isn't necessarily the important part.

[00:01:25]
The important part is playing around with this HTML here and kind of figuring out how it affects the experience when you wrap different things in different ARIA live regions, which ones kind of make the best experience. All right, cool, so yeah, let's go through this one, how did people find it kind of working on it.

[00:01:46]
Was it interesting listening to the kind of readouts come through and different things like that? Does anybody want to go and answer what you wrapped in ARIA live regions and which politeness setting you gave it? Otherwise I can just go but if anybody has.
>> Speaker 2: Yeah, I did M on the header.

[00:02:01]
>> Jon Kuperman: Okay.
>> Speaker 2: Because I noticed they were changing and then the one that was changing, I did assertive there, right.
>> Jon Kuperman: Was it this up here.
>> Speaker 2: The one there? Yep.
>> Jon Kuperman: Cool, and you did assertive for it, okay, awesome. Any other areas that we added, anything? It's kind of, I mean, I don't know there's a necessarily right and wrong way of doing it, but yeah, I think I had gone through and I had added like a polite update on here, which I'm not sure about.

[00:02:27]
I mean, maybe it doesn't matter when the last update came through, I wrapped the spans that have the score in them in polites too, with the labels. And then I wrapped these little announcement things in assertive as well, so like when a goal or something like that comes in, that's like the most important thing to read out loud.

[00:02:42]
And then between wrapping these with like a live and a label, it could just say like the team's new score is 2 or something like that. Cool, yeah, I wonder if, like, are there any other areas? I guess this is, yeah, I think this is pretty good. Pretty good stuff here, again, I don't know that there's necessarily like a linting way you could do this and prove that you have the best things activated.

[00:03:06]
But I do think it's nice whenever you have DOM that is being dynamically updated to stop and consider is this something that would be worth kind of announcing to the users? Yeah.
>> Speaker 3: So at one point I put assertive on both the last update and also like the head, like the scores below and it seemed like the last update would always like talk over or nothing else would update except the last update.

[00:03:27]
>> Jon Kuperman: Wait, can you say that again? Sorry, so you put assertive over the, was it this thing here?
>> Speaker 3: And then I also put it on the match container, the div with the match container class.
>> Jon Kuperman: Interesting, so I think maybe what you can have with assertive is you can have collisions, right.

[00:03:42]
Where they both try to go, I guess that is something to be very mindful of is that if you do have two things that try to go and collide, they don't queue. You'll just get the one that goes in there, yeah, I think that's a really good point.

[00:03:55]
I guess, thinking more on that, I think that I would wrap everything in polite except for I guess probably just these spans here with the actual announcement update or something like that. I think it's a good call because you can queue polite things because they will sort of add themselves to the idle queue.

[00:04:11]
So you can have like 100 polite ARIA live regions, but maybe you should limit yourself on the assertive ARIA regions because if they collide with each other, they won't queue up and read, yeah, that's a really good point. Cool, yeah, and I think this one's a bit fun kind of makes me always want to go through a lot of the apps that I work on in my day to day and consider areas where we could add just a cool little announcement.