Hi welcome back. In this lecture we're gonna be talking about accessible navigation. I know that this course is mostly about CSS, but I always like to pop in and remind you of the different things you need to think about as you're styling your pages. Navigation is really the most critical aspect of accessibility. If people can't navigate through your page and get to the content they really need to get to, then you've really just wasted their time and some of yours. So, cited users have these kind of tried and true things that they look for on a page. They know what a search box is. They know where the banner usually goes. Where the main navigation is. And its not surprising to them that often the main content, in what we call the content well, is hidden down lower in a page. And we know this because we can see it just as soon as we open up the browser. But for blind or low vision-users, they really need to rely on proper coding of the page in order to get to what they want to get to. And not just the proper coding, but there are a lot of stylistic issues you need to think about when you're doing this. So, what if you can't see? The first place that you get information is from the title of the page. You wanna make sure that your title is short but also lets the user know how this page is different from other pages at your site. Next, the proper heading placement, and kind of this hierarchy, allows screen users to skip the different navigational links and get directly to what they're looking for. I think you've all been to sites where it feels like you need to go to one place and then you follow another and you follow another. And this can be really annoying and irritating. Especially so if it's really important that your mouse is on just the right spot. So we wanna make sure that we let screen readers and other users skip right to where they want to go. We also want to think about your links. Because when you have the links to the different sites in your page, those descriptions are all that people have going for them. So you don't wanna use Click Me, Follow Me Here. You want to give good information in those link descriptions. Next, we need to talk about proper heading hierarchy, okay? Headings need to be nested in order to really provide structure, so you shouldn't have h3 headings before you have h2 headings. You should only have one h1 heading. You shouldn't jump from h2 to h4. Instead, you really wanna follow a certain kind of order so that people can realize that there is meaning behind your page. So here's an example right here. I have my single h1 heading, and then in this page, I can imagine that I have three sections. Each one of those sections has an h2 heading inside of it. And in my first section, it might be that I have these certain little bullet points or other points I'm making, where they're important enough that I've decided hey, I'm gonna use h3 to signify that this is another subsection within my section. Where people get in trouble and what you see all the time, is that people decide, I really like the look of that h2 font. I like just how big the text is. I like how the kind of font they use, so I'm just going to put as many things as I can into the h2 font cuz I like the way it looks. And they're not thinking about the semantics. The same thing happens with the h3 font. You'll go to somebody's page and find out there are no h2 fonts at all. Instead, it's all h3 elements, and they only did that because they like the look of that particular tag. So now, this is where the styling comes in, this is why I'm talking about this in the styling class. Is that now you know that instead, if you really like the look of that h3 heading, instead of using the tag, you should be styling other tags to replicate that look. Find out which font family they use. Find out which font size. Just repeat it. Don't use tags just because you like the way they look. The other thing you can think about to help navigation, is this idea of off-page headings. It's useful to do when you want to give the screen reader user some sort of navigational aid, but you don't want to put it right in the page and have your sighted users also have to deal with it all the time. So, let me give you an example of this one. We're going to use styling sheets to basically set something offpage, we've given it the name of offpage, and we've said, hey, I wanna place this in a position absolute off to the left by -1000px. So you'll know that that's pretty far off. I have here the University of Michigan Human Resources page. And if you look up near the top, there's really nothing there, up here in the top corner. But what I'm gonna do, is I'm gonna go ahead and hit Tab. And, what Tab does, is it brings the next element into focus. So, go ahead and Tab, there. And you can see, that now, there's this new thing here that says Skip to main content. If I click on it, I go all the way down, and I was able to skip a lot of this additional information that they didn't really need to see. It was more just marketing and different things like that. So, these different off screen navigation links are extremely useful to allow people to jump immediately to what they want to get to. But, by using styling, we've taken it off the page that you only use it if you really want to. One of the things I wanted to mention is, if you're going to do off-page headings, don't use {display: none} or {visibility: hidden}. These really just kind of mess with the code and make it very hard for screen readers or other people looking at your code to see what's going on. At the start of the lecture I mentioned that meaningful link text is very important for accessibility because screen readers can find and list all of the links. Now, what you may not realize is the way that these links are displayed may not be in the way you expect. So, they may be out of context. You may only be able to access them via tabbing or they may be presented in a list. So, you really want to avoid using things such as click here, read this and more. The reason being, is that maybe the only context some people get in order to go to the links. Also, please don't use the URL as a link description. It's pretty common to go to a site and you can see click here, and they have the entire URL, www.umich.edu/etc. It may look very descriptive, but if you have to listen to the description, it can be very confusing. Instead, unless you have a very short URL, go ahead and use some sort of textual description. So, just to review, let's think about what we've learned today. When you finish making your page, it's not enough for it to look good. You need to think about how easy it is to navigate your page. Think about what would happen if the colors weren't there, or if somebody could only navigate to your page with a mouse. So I wannashow you really quickly what I'm talking about here. Here's an old page of mine, and, at the bottom, I have the University of Michigan. I just want to show you what happens when I take away the style. The page now, you can't even see the text anymore. These are the kinda small things that you would never notice unless you checked your page both with and without styling. So, when you plan your page, make sure you're planning for everyone. Make great use of headings. Make great use of link text. And make sure that you're giving people the tools they need to navigate your page successfully. Thanks.
