2.4 ARIA Labels

We've taken a look at the navigation role and how usually it's just better to use a nav element, but there is more to a navigation than just the role itself. For example, if we have two different navigations on our page, like we do, you might want to label those navigations so that our screen reader, or other accessibility device, is able to differentiate between those two items. And we've sort of given these navs labels. We've put some H1 tags inside them in order to explain what they are. But we haven't really indicated that those are labels for those sections. So I want to take a look at a couple of different ways we can do this. The first method I wanna use is I want to define for this nav, what element is labeling that nav? And we do that using the aria-labeledby attribute. So, before we get any further, I want to give an id to our first header. And, I'm gonna give it an id of main-nav-label. And then for each one down here, we'll give it an id of footer-nav-label. Then for the nav itself, we can add an attribute called aria-labelledby, and then we're gonna set that equal to the id of the element that is labeling this nav. And we gave that a name of main-nav-label. So what this attribute is telling our screen reader or accessibility device, is that this entire nav here is labeled by this h1. In other words, the label for this main navigation is simply Main Menu. So we can do the same thing, I'm just gonna copy this here for our footer-nav. And I'm just gonna replace that with footer-nav-label. And now we've indicated to our accessibility devices that this nav is labeled Links. So let's see how that affects our screen reader. Let's save our page, go back to our browser. >> About us. >> And then let's refresh the page. >> Title, navigation list with four items. About us. >> Okay, so it starts off with about us selected, probably because that was the last item that was selected before we refreshed. But if we click up here at the top of the page and listen, >> Main Menu Links >> You can hear that it says main menu links. So it's reading the two labels for us. Now, if we don't have those labeled by attributes, let's just get rid of those real quick. And let's listen to it again, let's save that, refresh our page. [SOUND] >> Page title. >> And then click up here at the top. >> Main menu, Home, About us, Read the Latest News, Get in Touch, Links, Item 1, Item 2, Item 3, Item 4. >> You'll see that it reads through all of the text on the page. So, by adding those labels there, what is does is it kind of helps to structure the page. And then when we go back to the page, it reads us the high level overview of the page. And then using the keyboard, the user can drill into the specific items on the page in order to view them. Now I want to take a look at another way that we can label this, because it doesn't really make sense to visually label our main menu, Main Menu. If our site is well-designed, the users are gonna be able to see the main menu just by looking at it. So for most users, we don't need that label there. But for people who can't see this screen very well, we might need to label the main menu so they know exactly where to find it and they can navigate to it with their keyboard if they know what it is that they're navigating to. So another way that we can label these sections without actually having a label on the screen is instead of using aria-labelledby, there's another attribute simply called, aria-label. So what we would do there, lets go ahead and save that, and I'm gonna open a new version. Lets just go to file, save as, and I'll save this as landmark03. And then I'm going to get rid of our H1 tags here. So I'm gonna get rid of that one and the one in the footer. And now instead of aria-labelledby, I'm gonna change this to just aria-label. And then right here, I'm gonna call it Top Menu. And I'm just giving it a different name here so that we can hear that the screen reader's going to read what's here in this label. And we'll do the same thing down here. Instead of aria-labelledby, we'll just call it aria-label, and let's call this Bottom Links. So we'll save that, and now we need to navigate to landmark03.html. And then we need to navigate- >> Unselected. To landmark03.html. >> Page Title, Top Menu. >> And if we click up here at the top, let's listen to what our screen reader says. >> Top menu, bottom links. >> Okay, so he says top menu, bottom links. So again he's reading through the high level items on the page and he's reading the aria-labels that we gave to these main navigation sections. Now in addition to aria-label and aria-labeledby, if we want a more verbose label to describe maybe our bottom links, let's say that we have a paragraph here. And this paragraph simply says, Here are some links. And let's give this paragraph an id of footer-nav-description. Well in addition to using aria-label to label the entire nav, we can also use aria-describedby, and then we can point to footer-nav-description. And so this aria-describedby works very similar to aria-labeledby, except it's intended for a more descriptive label. Something that has maybe a little bit more text in it to give the user a little more information about the content of the element. So thank you for watching, and I'll see you in the next lesson.