by
Lessons:23Length:2.5 hours
Access 1
  • Overview
  • Transcript

3.6 Bypass Blocks

Keyboard-only users generally have to press Tab to get through sites, which makes a large main menu a problem. The WCAG covers this with Bypass Blocks, which lets a user hop straight to the main content of the page, past large areas that are repeated from page to page. Related Links

3.6 Bypass Blocks

Hey, John Hartley with Tuts+ here. And in this lesson of the beginner's guide to web accessibility, we'll be taking a look at bypass blocks or skip to content navigation. Let's take a look here at the bypass blocks guidelines. So 2.4.1. And it says that bypass blocks are basically a way to skip repeated content on a page. So if you're a user that has to tab through a site, let's look at Target as an example, you have this huge main navigation and you have this navigation on the side. So, if you've been going through the site already you may not want to have to go through that again. So, let's say you clicked on this link down here to buy some towels. Once you get to that towels page ,you aren't going to want to go through the main navigation. So having you skip to content, and I"ll show you what it does here, skip to main content, goes right into the body of the page and you can start tabbing through past the main navigation. Extremely helpful for users that have to tab through site. Same thing with Cota.com. When we skip to content, it just takes us to plan a trip. So that was the next thing that got tabbed to and we got to skip all the main navigation. So it's extremely helpful to someone that's only navigating with a keyboard. This is a single requirement so that should give you an idea of this being a very important one but not all that hard to accomplish. So let's head back to our site. Now you'll notice this code snippet from the focus outline that we just did and this is just kind of a normal page. It's a lot of content. There are links throughout but I'm gonna tab once and my skipped content link appears. Now if I press it, it should take me into the DIV that is called main as an ID of main. And I'll press it. And okay, it's moved down to that point in the page and we can see it's out of that #main. So visually, I'm in the right spot. But if I press tab again, it takes me back to the top. So that tells me that it did not actually gain focus and i'll show you a quick way to actually figure out what item has focus. We'll open up Console and you can do document.activeElement and see what has focus. So currently the body itself has focus. Right now, if I reran that, there we go, it says skip to content. And if I highlight that button, or this button. I can now see the active element has changed again. So that's a good tool for testing sites and being able to determine if you're trying to, with JavaScript, force focus on something. Make sure that it actually is receiving focus. So we'll close out of that and we'll take a look at our page again. So skipped content. And I've added a few styles in here just to show you that it doesn't just have to be over here in the left-hand corner. Just because you have to have a bypass block does not mean that you can't style it. Just keep in mind that color contrast is still important in this one. So skip To Content, skip to Main, skip to Content. Now these should all go somewhere on the page and I'll show you in the code what I mean. So right here we have our three main links to go throughout our page. We have skipped content which should go to main. We have skipped main which should go to first div, I didn't name these well but [LAUGH] But that's neither here nor there at this moment. And skipped content should go to content. So these are all styled differently, they have different classes. And let's find out where main is. So, id main is what we're looking for and it's right here. If this is working correctly, I should be able to click on skipped content, it focuses on main, and then the next tab will be next. Let's take another look and see if that actually happens. So, skipped content. Okay, goes to main. Next tab takes me back to the top. So what's happening? Well let's look at in Firefox. So I attempt to skip to content. And the next tab again should be Next. And it is. And here you can see the outline, that is default in Firefox. And now if I tab through I'm still tabbing through the site, and it actually has skipped the content. So what's happening here? This is bizarre. Why is it doing this? Let's double check to make sure that we're not crazy. So skip to content. And yeah, next is still the next thing that happens. I looked into this problem and it's actually a reported bug with WebKit. So Chrome and Safari will have this issue, where they don't actually respect that bypass block. So in Firefox, it's totally fine to just have it be set like this. It understands okay, if there's a hash there, it means we're going into that div and the next tab after that will be on the next item in the tab order. With WebKit based browsers, we need to add one extra thing in order to make it recognize that the item is focusable. It maybe thinking, it's tab index zero, if you watched the tab index lesson. But that would mean in the default tab order, we've now just added that div. And that's not what we wanna do. So instead let's give it tab index = -1. Now this means that we can programmatically give this item focus. Let's see if this works in Chrome. So we've added that tab index. I've refreshed the page. First tab is the Skipped Content. Press Enter, and now it's taking me to main and giving me a focus outline. This is a case where if you would like to, you can set an outline that is unnoticeable. It's the default on Firebox and non WebKit based browsers and my next tab should take me to that little next button and it does. So magically, this little tab index equals -1, fixes that, and allows you to have your bypass block. Now why it does this, I've no idea. But a bug report is in and has been in for several years. So I would say that it's probably not going to be fixed anytime soon. Now another way around this is to, let's remove that again. Come down here and this is a script that I found on WebAIM. And essentially what it does is, it takes a look at the hash that is in the browser. Once we've clicked, it has this hash of main. But if we remove that and refresh the page, so we don't have that initially. We go back to the code in (window).bind on hashchange. So when the hash changes up here, so if it goes from main to second code to anything else, it'll start to run a function. So it takes a look at the location of the hash and replaces it and saves it. And now it'll move down to and give focus to that element with that ID. You'll notice here on line 75 that it is then giving that ID a tab index of -1. And then on blur and focus out, it removes that tab index. M blur is just another way of saying focus out essentially. So that's one way to do it with scripting and there are many other ways that are out there but I find it's easiest to have that tab index of -1. There are a lot of different ways to accomplish bypass blocks but overall if you have some way to just skip that main navigation at the top of your page, you've already made your page a lot easier to navigate for someone only using a keyboard. Now that you know about bypass blocks let's take a look at another piece of navigation in an issue that it has with accessibility. We've talked about bypass block navigation and now I wanna turn to something that's on almost all sites. But you may not know how to make this accessible. And that is just the main navigation of your page. So in this example page, I have a main menu right here. So home about pricing products and contact us. And under About, I have some more information as well as under Products, I have a few more as well. So the decided user using the mouse, this is no big deal, it is easy to use and the CSS is pretty simple. All the links are in my blog and then you give it a hover so that when you hover over something with an unordered list inside, it will show that list. Easiest way to do that is display none and display block. But if a screen reader were to come across this, it would only read these five things because it forgets about the pieces of the page that have display none, which is fine. That's the expected result and so you would never actually get inside here. You would only get this main navigation right there, that was top five. Now you could say, well once the user goes to the about page, they're gonna have more ways to get to those extra items. And if it's a gigantic dropdown, it has many, many, many items, it may make more sense for a user to have to drill down into that page In order to navigate to other pages. But let's say we actually want to make this accessible. The rules around navigation is kinda up in the air. There's no one set way to do it. And it's all about just giving the user context and explaining what's going on. There are some ARIA attributes that help out with that. We're not gonna really touch on those, as this is more of a beginner's course. But I urge you, if you're interested to go ahead and read on about aria expanded and aria in the sense of drop- down navigations. So how do we fix this if we want to show those extra list items. Let's take a look at the code that we already have. So we have This unordered list inside a nav, and this is a landmark called nav. And landmarks, we'll get into those in a later lesson, but those are important. And then inside of a list we have a submenu with more list items. So pretty standard main menu right here, and something that very common across a lot of sites. So let's go to a better version of this. So same markup, but let's take a look at what happens when we tab through. So tab, tab, tab and those are just leftover, skipped over main content that we had from the previous portion. And we have home, okay, About and we can see that this pops up, so that's nice, but now it's disappeared and I don't know where my focus is. And now we pop back out to Pricing, and now Products, and okay, we can go through those again but we can't see them, and so now we have Contact Us. There isn't really a good way with CSS alone to show that extra list that's inside of products, but with a little bit of scripting, I can make it so that those now appear. Let's look at the code for that. So that's down here and this obviously isn't going to apply in every situation, this is just a quick little script using jQuery to help you get an accessible nav very quickly. So it looks at all the links that are in that navigation and actually I'll just make it a little more specific and say nav links and so now it's got all those grouped. And whenever it focuses on any of them, it checks to see what the closest list is. And saves that as a variable. And then if it's got class sub menu it will add glass show, if it does not it will remove the class show and disappear. So showing that to you on the page, now that we have it saved. We have our skip to navigation links. And now we Home and About, and that opens up as it did previously. But now, we can actually tap through and we can still see it. And I'll open up inspector Drill these down. As I'm tabbing through, you can see on the submenu that the first link, as soon as I get in there, it adds that show class. And I tab again, it's still there. I tab again, it's still there. And I tab out, so now the closest list is this main list. And it won't give it show, and it removes show from that previous list. So, in products and I can tab through those as well. So pretty cool, pretty quick little way to do that, and I realized after that last swipe that I didn't actually have a hover on there. So, back in my CSS I have, and this again is in SAS, I have my list item, on hover, the UL below it goes to height, auto, and padding 3 pixels. And also when I'm focused on a link whose sibling is a list, give that list height of auto and padding 3 pixels. Now why not just display block on this and that's because we're not using display none because that would not show up to a screen reader. Screen reader would not notice it and you would just get a regular tab just like we did over here. So straight through all five. So you can see the value in each here, this gives someone more flexibility to go through all those. Now, if they went to a second page here, they could just skip to content and it would totally skip that navigation and pop down into the main content. So you have some flexibility as to how you organize your navigation and how accessible you make your navigation as well. It's really kind of up to you but just wanted to show you that as like a quick little. There are things that you may not necessarily like about it and that's fine too. But that's just a starting place. It's eight lines of script that Instantly boost the keyboard accessibility of your site. So tweak it, adjust it, you work with it or find your own ways to do it, that's totally fine too. Now for a larger navigation, something like that may not be a good idea, because you'd have to tab through every single one. I've been on sites where it takes 170 or more tabs to get from the start of the site just into the main content and that's because the menu is so large. You'll have that on e-commerce sites sometimes. There are some scripts out there that can help you out with something like that and really the main one I wanna mention is the Adobe Mega Menu. And so this is nice because someone can tab in here and press Enter and all of this opens up and you can tap all the way through. And you can also use your just arrow keys to move throughout the menu. It manages to take all this content and make it keyboard accessible to a user that is only using their keyboard. It's also screen reader friendly, so it's a good option if you're looking for a quick way to make a large menu accessible. If you've got the time a custom solution will most likely be better, but this is one that you can just kind of plug and play and get it on your site pretty quickly. Hopefully that gives you a brief idea of how a navigation works and how to accessibly make a navigation. In the next lesson we're gonna take a look at Aria and how that pertains to web accessibility and how it helps where regular mark up sometimes fails.

Back to the top