7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 42 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Menu Accessibility

Good menu accessibility is important because, without it, some of your users will have difficulty navigating around your site. In this lesson, you will learn a few helpful roles related to menus and menu items.

2.5 Menu Accessibility

In this lesson, I want to talk a little bit more about menu items when it comes to Aria roles. And I realize we're spending a lot of time on navigation, but navigation is very, very important when it comes to accessibility. Because your users need to know how to get around from page to page on your site. So we've talked about using the nav element, which semantically is equivalent to using the Aria role of navigation. But we haven't talked about other aspects of our navigation. So we have another role called a menu, which we're gonna use on our unordered list. And then, we have another role called menu item, which we'll use on each of the Items in that list. And I'm only going to apply this to one of our menus so that we can hear the differences. So for unordered list, for our main navigation, let's go ahead and save this with a new file name here so that you can have all of these different versions that we're working with. So I'm saving this one as landmark04. So all of these changes will be saved there at the end of this lesson. So in our unordered list here, I'm going to give it a role. Of menu. Notice there's also a menubar option. And again, you can look up on the WC3 website, or you can search elsewhere for what each of these different roles does. We don't have time to cover all of them, but we're gonna give this a role of menu. And then, for each of our list items, we're gonna give those a role of menuitem. So I'm just gonna copy that. And it looks like I accidentally broke things in my HTML. So let's get this anchor tag back, there we go. And then, we'll just take this role of menu item, copy it, and paste it for each of our link items there. So let's save that, and jump back into our browse. And I'm gonna navigate to landmark04. If you'll notice the silence here, it's because I've temporarily turned off the Chrome Vox extension so that it doesn't talk over me when I'm trying to talk. So I've got another tab open on my other screen with my extensions. I'm gonna turn Chrome Vox back on, and then we're gonna take a look at the page. So let's take a look at the bottom menu first. I'm gonna click somewhere down here, close to the bottom menu. >> Bottom links. Navigation footer. >> And that doesn't give us a whole lot of information by itself. So let's hit Tab. And Tab will probably take us into the first menu item here. >> List with four items. >> Or the second one. >> Item two. Link list item. >> So it says item two, and it calls it a link list item. Let's see how that differs in our top menu where we added these new roles. So I'm gonna click up here at the top. >> Top menu bottom links. >> And I'm gonna hit Tab. >> Header navigation menu with four items. About Us link menu item two of four. >> Okay, so this is calling it a link menu item instead of a link list item. So it just describes our links in a little bit of a different way when we use that menu item role. And again, that might not seem like a big deal to most users. But for somebody using a screen reader or other type of accessibility device, these details can be very, very helpful. S, again, for our menus, we're gonna use role-menu. For our menu items, a role of menuitem. And there are other roles and attributes related to menus that we could use. For example, there is an attribute called aria-expanded, and we can set that equal to true or false. So when we set that to false, what that tells a screen reader or accessibility device is that we have a menuitem here, and we have some way of expanding and collapsing that menu item. And if aria-expanded is set to false, then that's telling our devices that this current menu is currently collapsed. If we set it to true, then that’s telling our devices that it’s currently expanded. Now, once again, let me reiterate that if you’re going to use attributes like this, you need to make sure that you also provide the functionality. You need to provide the means to expand and collapse this menu if you’re going to use that attribute. And you also need to make sure that you change the value of that attribute whenever you expand or collapse that menu. So again, as I've said before and as I'll probably say again, these attributes do not control the functionality of your page. They assume that you've controlled that functionality yourself. So you need to provide that functionality, if you're going to use it. But you would probably think of it the other way around. If you going to provide that functionality, so if you're going to create a navigation list that expands and collapses, then make sure that you use the associated roles and aria attributes to help accessibility devices understand what your content is doing. So thank you for watching, and I'll see you in the next lesson.

Back to the top