FREELessons: 9Length: 42 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 The Navigation Role

For our first taste of ARIA, we will take a look at the “navigation” role. In this lesson, I’ll show you how to use this role with navigation components, and I’ll demonstrate how a screen reader treats content with and without this role applied.

2.3 The Navigation Role

Hello and welcome back. Now that we've got our screen reader software, or extension, installed in Chrome, let's take a look at how using these basic ARIA roles that we're gonna talk about, is going to affect how that screen reader reads the content of our page to its users. So I've got a starting file here called landmark.html, you can open that up in your project files folder. And I've created a new copy called landmark02, I’m gonna make all of my changes to this new copy. So you’ll notice this is just a simple page, it’s got a couple of navigation units on it. We’ve got a div here with a main menu inside it, and then another div inside our footer with some menu items. Now one of the things that I wanna say about accessibility in general, is that one of the best things that you can do to improve the accessibility of your website, is to use all of the HTML 5 semantics that are available to you. And by that, what I mean is, when you want a footer for your website, don't just put it inside a div with an ID of footer, instead put it inside a footer element. That's what the footer element is designed for. When you're creating a header, use the header element. Having said that, you might notice that we had this navigation unit inside a div, instead of a nav element. And we're actually doing that on purpose for now. In a moment we're gonna change that. So I'm gonna open up landmark02 in the browser. But before I switch over to my browser, let me point out, as I've mentioned before, that this ChromeVox extension is very, very talkative. So as soon as we move over to Chrome, it's gonna start talking to us. And you can always make it stop talking by hitting the control key which will hopefully save us a lot of time. Otherwise, it's going to do a lot of reading. So I'm gonna jump back over to Chrome, and we haven't clicked on anything yet, so it hasn't started talking. But for example, if I were to click in the URL. >> Selected. >> We hear that it starts talking. Sometimes it'll even read out the entire file name for you. So I'm gonna reload this page. So that we can see what happens when it first loads. So let's reload and listen. >> Unselected. [SOUND] Page title. Main Menu. Heading one. >> Okay, so it read our page title to us, which is just the title in the head of our HMTL document, we can change that to whatever we want. So the first thing it does, is it reads that page title and then it looks at the top of the page or the top of our HTML document, and it reads the first piece of text that it sees there, in this case it was our main menu, and then it even let us know that this is a header one, it's a level one heading. And if I hit the Tab key. [SOUND] >> List with four items, Home, link list item. >> It tells us that we've got a list here with four items in it, and then it reads the first item to us and tells us what that item is. It says it's a link list item, it is a link, and it is a list item. If we click outside of the link, just on the bullet point for that list item. [SOUND] >> Header list with four items. Home, list item. >> It tells us that it's just a list item. So it's very good at telling us what the different elements on our page are. But we can actually get something more out of this by using the right mark up. Again, when our page first loads- >> Selected, page title, list with four items, Home. >> It jumped down to the list because we had that selected before. But the first time we loaded it, it read the Main Menu to us, so. >> Main Menu, heading one. >> If we click on that it does the same thing again. Now, we can do something a little more to this to let out our screen reader know that this is a navigation item that we're inside. And this is where semantics can come in handy, or roles can come in handy, depending on how you decide to structure your document. For example, if we change this div to a nav element instead of a div, let's see if anything different happens, let's go back to our page. >> Window page title tab, selected. >> And then we'll load our page again. [SOUND] >> Page title, navigation, Main Menu, heading one. >> So this time, before it read the Main Menu to us, it told us that we were inside a navigation. And it knew that because we have this nav element. So again, a big part of understanding roles and ARIA roles is understanding that you don't always have to use them. Now, we're gonna go ahead and see what it looks like when we do use a role instead of the element, so that we can show you that it basically achieves the same purpose. So if we turn this back into a div, and instead of calling it a nav element, we're just gonna give it a role of navigation. And let's see how it treats our div now. So let's go back to our page. >> Window page title tab. >> And we'll reload. >> File colon, page title, nagivation, Main Menu, heading one. >> And so as you can see there, it let us know that this was a navigation. So our screen reader knows that when we use role="navigation" we're gonna treat this like a navigation unit just like we would if we just made this into a nav element. Now usually, you would just make this into a nav element. There's really no reason to make this into a div, it always makes more sense to make this into a nav. Unless you have some very specific reason that I don't know about. But I'm using this point to illustrate what these ARIA roles do for us. In the absence of a proper element, it tells our assistive technologies what this particular piece of content is going to be used for. So thank you for watching, and I'll see you in the next lesson.

Back to the top