This course has been updated! We now recommend you take the Website Accessibility, v2 course.
Transcript from the "ARIA" Lesson
[00:00:00]
>> Jon Kuperman: ARIA stands for Accessible Rich Internet Applications. And I kinda wanna to show an example of, if you had to, how you could use ARIA and JavaScript to give elements all the functionality that they might have if you use the Symantic one. So if say, for some reason you have these spans that you use for buttons and you have to keep them as spans, which you probably don't, cuz you just use buttons.
[00:00:24] But let's just say. I just wanted to show both that it's possible but also all the work that would go into making them accessible. So the first thing that you're gonna wanna do is you're gonna wanna add a role. So adding role button with to something is just, the roles are just communicating to the screen reader.
[00:00:41] So now the screen reader is going to parse it as though it's a button, not a span. It doesn't have any of the functionalities still, but at least a screen reader will say, here's a click me button as opposed to ignoring it cuz spans aren't focusable. Then you're going to want to add tabindex so you can tab over to it, like it's a button.
[00:00:57] We covered at the beginning, so tabindex=0 makes it tabbable just in its place, in order, wherever it can be found. And then the most important thing is you're gonna wanna add those listeners, right? So you need both an onclick listener but you also need an onKeyUp listener. And in that you need a handle to make sure that only the right button is pressed, like Space.
[00:01:17] It needs to handle Space key but it doesn't need to trigger anything on Esc or Tab again, heaven forbid. So you kind of get into this situation where if you wanted to kinda go the long route of not using Symantic HTML ARIA will really help you get there, or even some of the accessibility rules baked into HTML like role.
[00:01:36] But it starts to get really messy where you're like have kind of a lot to maintain. This one we talked about a little bit but I kinda wanted to come back and focus on it. We talked about labels and aria-labeledby and I kinda wanted to also complete that picture with aria-describedby.
[00:01:53] And so aria-describedby is a really perfect place to put, we had a good amount of really good questions about like what if you have this specific type form of information about a form field or something like that. describedby is like a really great place to put it. This is what you needed to know, this is why we're asking for it.
[00:02:10] Here's what happens if you click this, here's what, you know what I mean, all these different things. So the label should still be very specific, the label for this is just close. And that's just like an x button on a moto let's say. So you wouldn't want to put that in the label cuz way too much information but what's cool, and this is one of the areas that we get into describedby, where some screen readers implement these things pretty differently.
[00:02:30] But for the most part, what you're gonna have is when you rest on an interactive item, after the screen reader reads the label and tells you what type of items it is, then it will go into reading this nice description. And if you tab away it'll just stop.
[00:02:42] So this is a really great example of, hey, if you click this thing, if you close the window, it's gonna discard any of the information that you've entered and take you back to the main page. A really nice conversation to have here and honestly, I think a lot of the times this would be good to have visually as well.
[00:02:57] Somewhere visually that you can see, if I click this thing I'm losing a lot of different stuff. Another cool thing is you can actually use ARIA attributes in your CSS. I've seen this one a lot, where you have some kind of drop down. We're going to get into ARIA expanded, but basically ARIA gives you all these great tools for, is it clicked, is it hovered, is it expanded, all these different things.
[00:03:20] And so you can kind of do neat things, I saw this on a site which is, you have this drop down with a bunch of icons in it, and they're either expanded or they're not expanded. So if they're not expanded they're a little arrow pointing this way and when they're expanded they move down.
[00:03:33] But I just thought it was cool that you can, as your adding these ARIA rules you can also catch them in CSS as selectors and do different things with them.