Website Accessibility Exercise 5: Solution

Transcript from the "Exercise 5: Solution" Lesson

[00:00:00]
>> Jon Kuperman: Yes, we had some really good discussion both on chat and in person, so I just wanted to tackle a couple of things before we go into the code example. I mistakenly used the wrong title, I was copy pasting, so sorry. It says keyboard navigation up here. And then, so people were talking back on that great question about if you have a spinner, and you're loading content in, with regard to announcements and things like that.

[00:00:24] Se had mentioned a little bit before, Jack was talking about this concept of the accessibility tree. And basically, how if it's not in that tree, or if you want content to be read aloud, it has to be part of the accessibility tree. But the accessibility tree is updated for free when you append or remove domino.

[00:00:45] So if you have a spinner without ARIA live on it, and that is just stops spinning or something like that, that wouldn't get you very far. But as long as dominoes are being in pending in that side bar area, they'll become part of the accessibility tree. So then, after it loads in, just for free, you'll get the right functionality, for then when you move over to it.

[00:01:06] So that was really good, and then people were talking about a little bit of like ARIA live, and ARIA relevant, and can you use ARIA Relevant without ARIA Live? So we were talking a little bit about ideas, and Jack was mentioning the concept of using ARIA Relevant within JavaScript to control, to silence, temporary silence the screen reader without having to redo all of the different areas that are live regions, something like that.

[00:01:30] So I'm assuming, I'm not sure, I definitely look into, does it cascade in any way? Could you have an ARIA Relevant on the body tag that you'd set to off? I'm not sure. But it's interesting, there's definitely some really interesting used cases for, like advanced use cases for the ARIA attributes to really control what the screen reader says.

[00:01:51] And I think that was it. I wanted to go through in order doing the JavaScript first, so we can experience what it's like with no ARIA live regions. And then from there, move into the ARIA stuff just so we can all be on the same page, so just go through this pretty fast.

[00:02:09] Again, cuz the JavaScript isn't really the important part as much as the accessibility. So I put these three IDs. So account and dec, and then I think I have an empty ARIA, that JS file. So I'll do var increment, man, my spelling, increment, that seems good. Next time, I'm gonna go up and down.

[00:02:29] [LAUGH] var counter. Okay, so we'll set these things, just document.querySelector, and then we'll just do the ID of inc
>> Jon Kuperman: [INAUDIBLE] #doc, and
>> Jon Kuperman: The idea of count. Just to grab onto all three of those things, and then I think the way that I did it in my example, just to quickly do it is I just have a global variable of count, which I start at zero.

[00:03:10] And then I think I have a function that sets the counter, which I think just does something like, I take the counter, and then I set its innerHTML to be whatever the counter's currently at. So I think we could call something like set counter, and just call it.

[00:03:31] So I think if we do this, and I get rid of this value in here of zero. But then I refresh it, it should be zero anyway. Now, it's getting set by that JavaScript. Yep, and then from there just, again, if you wanted to do this right, you'd have to be more careful, the pricing integers out or whatever.

[00:03:48] But for now, we're just gonna keep it pretty simple. So we can just do function add, and functions subtract, and then function add. I'll just set the count equals, count plus 10 or something like that. And then function subtract, I'll set the count equals count minus ten, and then both of them we'll just call, still getting used to this editor here, what's going on?

[00:04:14]
>> Speaker 2: Command D.
>> Jon Kuperman: setCounter, cool. So I think that should not work, and I was right.
>> Jon Kuperman: What do I got going wrong here? count=0 setCounter.
>> Jon Kuperman: Wait, yeah, yeah, yeah. I'm sorry, I don't have any selectors. [LAUGH] Cool. So we've got the count initially set to here, and then we just wanna do something like increment.addEventListener, and then just set, like when you click the increment, it runs the add function.

[00:04:53] And then decrement.addEventListener, and when you click the decrement, it runs the subtract function. Oops, Subtract function, cool. Cool, so that goes up and down. So, okay. So but what I wanted to talk about here is then, so we've got this JavaScript, and it's making these buttons that change these values.

[00:05:13] And so if we go ahead, and we turn on the screen reader.
>> Digital Voice: Navigation window reload this page. Keyboard navigation visited, link, back, increment, button, decrement, button. You are current, increment button, you are currently on a button.
>> Jon Kuperman: So you can see I'm doing stuff, and it's literally giving me no clue.

[00:05:34] Like A, what the button does. Which we could solve with labels and describe by and things like that. But B, I hit the button, and I don't get any feedback. So there's visual feedback. If you're a sighted user, you can see that the button's being hit, and you can see that these are changing.

[00:05:49] But there's just no feedback being given to you about what's happening. And so the basics that we could do is we could take our account here, and we could just add ARIA live region on it, and we could do. This is one thing I love about, I'm not here to preach editors.

[00:06:05] But one thing I love about Visual Studio Code is that they take accessibility really seriously. It's one of the only editors that built-in, fills in all of your different ARIA standards and attributes, things like that. It just comes that way, so it's nice, so you don't have to be looking stuff up.

[00:06:21] So yeah, so ARIA live assertive. So we can go back and refresh it again with the counter on.
>> Digital Voice: Increment button, E10, 20, 30.
>> Jon Kuperman: And then.
>> Digital Voice: Decrement of 20, 10.
>> Jon Kuperman: So at least, that way we have some signal going in. We could go a lot further with it if we wanted to, like we could add a label to this.

[00:06:41] We could make this focusable and add a label to it. So try to get to read the label as it updates, so it could be as the current value. I don't have context, let's say this was points. You could say your current points are 10, or whatever the context is.

[00:06:55] This isn't really anything, it's just numbers, but you could start playing around with, again, turn the screen reader on, you've got your ARIA live set up, find an appropriate label, so it rereads it every time. Maybe some labels, you could even visually hide them on the buttons that say what they do.

[00:07:08] Like increment your points by ten, decrement your points by ten, and before long, you've got a really robust experience for screen reader users. There are two things, so we're gonna get into color next. But before we do, there were two things that I wanted to point out that are pretty neat as you're going along here.

[00:07:26] We have a whole section at the end on tooling, but there is some really great tools for Chrome. One of the cool things is a dev tool experiment with accessibility. So if you're interested, you can, in Chrome, go to about://flags. So these are like experiment. Don't even, just ignore that top.

[00:07:46] That top network says I might ruin everything. But if you go to dev tools, you should take caution. I was just kidding. I just like that it's got like a nuclear sign. It's like careful, warning. But anyway, one of the things you can do in here is you can turn on dev tools experiments, which is great.

[00:08:03] It'll keep you kind of up to date with all the latest and greatest stuff they're working on. So you turn that on, and you restart your browser, and then what you'll see different is with dev tools open, you can go here and go to settings, and you'll see this experiments tab.

[00:08:15] The the only reason I wanted to point that out is because they recently added this accessibility inspection experiment, which is really cool. And so basically, you turn experiments on, refresh your browser, and then you turn this experiment on. And you'll start getting some really neat stuff, so if you're over in the elements tab, and we find our little ARIA live region area, which is here.

[00:08:38] And then we come over here, you'll notice a new, two of new ones, which is Accessibility and Accessibility Properties. So, Accessibility Properties will show you these really nice things, like what your ARIA live is currently set to, contrast color ratio, what the current value is, things like that.

[00:08:54] Similarly, this accessibility tab will give you a lot more very basic stuff on what ARIA attributes are on the item, if any, and then what properties the item has. So this is a way to visualize this accessibility tree. This is the information the browser has to work with.

[00:09:11] So you can click on some of the-
>> Speaker 4: Real quickly, what was the flag?
>> Jon Kuperman: It's about colon//flags, then if you do Ctrl+F or Command F for a file find, and you just search dev tools, there's only one on that whole list for dev tools, and then enabling it will require a browser restart.

[00:09:28] But then after that, you'll be able to go to experiments and turn it on.
>> Speaker 5: I was gonna say I enabled it, but I didn't see it.
>> Jon Kuperman: Yeah, you just got to refresh your browser, which you might not want to do right at this second. But it's cool.

[00:09:38] So anyways, you can see this one doesn't have any, but again, I love the dev tools because they help you visualize this stuff that we're learning about. So as we learn about accessibility and ARIA accessibility trees, it's cool to be able to click on one and just see like what information the browser has.

[00:09:53] Like okay, it's an ARIA live region. None of these are necessarily suggestions, but it's letting you know things it doesn't have. It's a live region, but it doesn't have a label, and it's not labelled by anything, and it doesn't have a title. So to me, I would be like, okay, it probably wants those things, right?

[00:10:11] Live region, let me go give it a label like we talked about. Let me go give it a title, things like that. And then this one is cool, too, just in the property. So you can start doing a little bit of color contrast, which is what we're going to move into next.

[00:10:21] But also, just seeing what attributes are on an item.