ARIA Attributes for Accessibility

[00:00:00]
>> Jen Kramer: Yeah, we are totally missing accessibility here. And it's so much easier to put the accessibility in now, rather than add it after the fact and try to retrofit your site. Because it literally takes three minutes. So let's just go ahead and spend the three minutes putting this back in place.

[00:00:15]
So we're going to go on ahead and start back on up here at,
>> Jen Kramer: The,
>> Jen Kramer: Find my code again, here we are, main menu, main toggle, right here. Okay, so we can give this an aria-label.
>> Jen Kramer: What is aria, anyone? Something a soprano sings? What is an aria?

[00:00:43]
These are screen reader directions here, okay, so just think of it as screen reader directions. And so what we're gonna tell this thing to do is open main menu, because that's what this is gonna do. When you click this, it's gonna open the main menu. By using this as a generic aria label, the screen reader will know that you can click on this to get to the main menu.

[00:01:06]
Okay, let's also add here, well, it's great to have these icons or your SVGs or whatever it is you wanna use here to put in your hamburger button. It's also nice to have words like, main menu, or something to that effect. And so one way we can do that is by putting in another span tag.

[00:01:27]
And we're gonna make this a screen reader only item, so span class = "sr-only". You might be familiar with this type of class from working with Bootstrap. The concept here is that, when we write the class for this, it will make sure that this text is not gonna be seen regularly on the screen, but it will be read by a screen reader.

[00:01:47]
And so let's go ahead and add that, open main menu.
>> Speaker 2: It's not recommended to use both at the same time.
>> Jen Kramer: Okay, now I'm gonna use both.
>> Speaker 2: Because it'll read it twice.
>> Jen Kramer: Okay, then it'll read it twice, so choose one of those two, okay, either the aria or the screen reader only.

[00:02:08]
And then, let's see, down here on my backdrop, here it is. I've also been told that this is potentially duplicative, also, tabindex = "-1".
>> Jen Kramer: This can potentially be the same thing twice, because you're using the hidden attribute. You may not be familiar with the hidden attribute, but it does exactly what you think it does, it hides this tag pretty much from everybody.

[00:02:38]
Okay, and tabindex -1 means that people won't be able to tab onto this if they're tabbing through the links here with their screen readers. Okay, what have I missed, I missed the nav tag. Up here on the nav tag,
>> Jen Kramer: Our ID of main-menu, we've got our class of main-menu, we can also put in an aria label here.

[00:03:00]
I thought this was duplicative also.
>> Jen Kramer: aria-label,
>> Jen Kramer: Main menu. Because by nature, this is a nav tag, I thought that might be enough, do you know for sure, Amy?
>> Speaker 2: Right, if you have more than one nav element, you should have an aria-label if you don't have a heading to call it out.

[00:03:28]
>> Jen Kramer: Okay, so if we had multiple nav tags here, then you would probably wanna include this aria-label. But in fact, on this page, we don't, but I'll go ahead and put it in anyway cuz maybe you guys are gonna copy this and use it in other code, so maybe you will want to keep that.

[00:03:45]
And then likewise for our close button, we should add to this a span class of screen reader only.
>> Jen Kramer: And this would be close main menu.
>> Jen Kramer: Okay, so there we go, a few extra accessibility things that we can add on our Font Awesome icons. We can also add to this, aria-hidden,

[00:04:16]
>> Jen Kramer: = "true", did I put that on the other one?
>> Jen Kramer: No I didn't, so we can add that here too, aria-hidden,
>> Jen Kramer: = "true", okay, so just hiding those Font Awesome icons.
>> Speaker 2: And you're right, when you have the hidden attribute, I mean, you shouldn't mess with tab index period, but with the hidden attribute, you don't need-

[00:04:50]
>> Jen Kramer: You don't need the tab index.
>> Speaker 2: The tab index.
>> Jen Kramer: Right, yeah, it's kind of a belts and suspenders.
>> Jen Kramer: Okay, so there's our HTML, is everyone clear on what this is? If you didn't keep up with all the typing and so forth, it is available to you in the ending state folder for chapter two.

[00:05:08]
Okay, so we've gone ahead and we've put in all of our HTML here. In the real world, if I didn't already have my CSS written, I may be jumping back and forth a little bit to add some classes and so forth as I go. But for the moment, we're basically done with the HTML.

[00:05:25]
So if you save that and drop it in a browser real quick, you will see what this looks like. And so you should see your Font Awesome icon up here, there it is, there are the bars, there's our close button. So far so good, that's the best HTML can do.

[00:05:45]
>> Jen Kramer: Awesome HTML.