Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:23Length:2.5 hours
  • Overview
  • Transcript

4.2 Using the Keyboard to Find Other Issues

In the previous lesson we passed all of the automatically generated issues, but in this one we’ll see if the site is navigable using only the keyboard. Let’s get started and see if we run into any issues.

Related Links

4.2 Using the Keyboard to Find Other Issues

Hey, John Hartley here for Tuts+. In this lesson of A Beginner's Guide to Web Accessibility, we're gonna be taking another look at this Reebok site. Now, we've gone through with the aXe extension for Chrome, made by Deque. And we've checked out kinda the top, the easiest things to pick off in terms of accessibility issues. So now it's time to do the navigation test with keyboard and see how we do. So I've got the original site right here and I tab once and this is that tab index issue that we had taken a look at. And I'll tab again and there's nothing there, tab again and I'm not really sure where I am at this point on the page. All right, looks like we're now getting into that main menu. So the first thing I'm gonna do is adjust the CSS so that focus outline actually starts to show up. And what I've done is taken that CSS and brought it in here, expanded it because it was minified as most sites in production should be and I looked for outline none. So it had been around line 314, so this is the CSS for all links or anchor tags. And it had outline none, or outline 0, so I commented that out. Everything else is the same. And now once I go over to the completed site, you can see that there is actually a focus element around everything that should be getting focus. All except the button right here. So this button, we need to make sure that gets focus. And you can expand this out, and there's a nifty little tool in Chrome where, so we're selected right there, if we hit this little thumb tack, you have active, hover, focus, visited, focus is the one that we want. And you can see that no extra styling is given. And because of that one, we'll cycle down here and right here on the button, we can see that outline is set to 0. So we'll go back over to the CSS, and we'll look for button and way down here around line 12,000 is where that actually is so we'll comment that out as well. So now if we refresh the page, we should see, yep, there we go. There's an outline there, and I can continue tabbing through. Throughout this CSS file, there are about 12 other matches for outline zero. But instead of going through all those, I'm just hitting those big ones. if this was a full site, I wouldn't be going through and taking all of those out. I saw it briefly as I was tapping through and I added in bypass blocks. So as I was going through this, you'll see right here on the original site that there's no way to get past this main navigation. So this opens up Menu tab again and that closes. And then it takes you back to the top of the page. So if you're a user that's only using the keyboard to get through this site, you're unable to do so. This menu, it's almost like you have to just very quickly. Every now and then you can get to the next section. But as it stands, it doesn't seem too possible to be able to do that. Now if you're using assistive technology there may be other ways to get through its site. But keyword only you should be able to still get through this menu. So in the updated version I have added skipped content, and you can see that right here. And I'll go ahead and hit Enter and next tab is inside the main. So we now have a skipped content block, and this alone is a huge help to people that are using keyboards. And so let's go back up here to the top and see what happens when we're still going through. So we get to this Men's, and you saw it real quick, it goes to this link. But after that, it goes back to the top. So if a user using this website with a keyboard is going through and starts to get frustrated like, well, why can't I go inside this Men menu. And they keep getting kicked back to skipped content, they can at least go through the rest of the site. There are many ways to get through the site and in the footer especially you're able to kind of go through each of the categories. So that's that value and why it's a single A guideline. It's extremely easy to do and it's probably one of the most helpful things that you can do for a website. So we have a bypass block. We now have an outline so that means we're able to see where we are as we maneuver through. As I'm going through this header, you know I have that skipped content, then the logo, then the search, then the button to complete the search. And then it hops to the cart which is out of order but I'd make a note on that and later on would be something that I'd fix. One thing with this need help link and I'll hover over it right here. You can see that there's a list that is now under this. But when we're tabbing through, you can't actually see it. Now it's still functional because you can go to, just kind of a general need help page, but over all it's something that using what we learned in chapter 3 you could make that available. So now that we've done this and kinda gone through these top parts here. It's time to really kinda look at that menu. So, what's happening here and I'll open up the inspector so that we can see really well what's going on. When you hover over this, there is a sfhover class that gets added to that list item. So watch it right here, as I hover over, it gets sfhover. Now event listeners in Chrome, you can actually check out the scripting that is attached to just that html item. So mouse out and mouse over and that is on all of the list items in that list. And for each of these, any time you hover of it, you're gonna get that SL hover class. So this is great for someone using a mouse cuz as soon as they mouse out it disappears and that class is gone. But for someone using a keyboard. And this is a bit bizarre that when you actually tab to it, it loads that first class and that's kind of it. So it loads that class and you can see over here that it gives you sfhover. But if you tab again, and let's go back there. You tab again and it disappears. So with a menu this size is something where you would really need to find a good way for somebody to get through this. And whether it'd be being able to use a keyboard all the way through, or pressing the Enter key and having this menu open up, and then you can go all the way through it using the arrow keys to navigate through all of the menu. There are many different options, ultimately, it's up to you to decide how you'd like to fix it. Just as a test, let's take a look at the event listeners again. And when we drill these down, let's go ahead and remove them, see what happens there, and I'll do that for all of these. And what happens now if we go through the site. Okay, so I'm still passing through sfhover. And now it tabs through nicely. If you're saying, well, there's a lot more information inside, you're 100% correct. But this at least gives them a way to travel to these main categories. So you could still go to fitness. So, you could still go to classic or design your own. These are all things that you can now do that you weren't able to do with a keyboard previously. There's a lot more that could be done with the menu, and with this page, in general. But overall, it's at a place where we can at least use this page. For next steps for this site, it's definitely something where I would take a look at the individual pages. So, let's go to training page and this is a product overview so like a main category on their site, and let's just inspect this to see how many violations there are. So we analyze and 121 violations are found. Now, a majority of those are the discernible text and some are at the bottom and then another 48 are images that just need off text, so that would be each of these individual products. So tabbing through this one, I kind of have no idea where I am. So, this is another case where if we had the outline turned off, we'd be able to see where we were and we'd be able to see what's going on here. So, I'll just press Enter and it looks like it took me to the shoe and tabbing through, if I take myself down into the page again, still, well, looks like there's a little indicator there on Add To Cart. And so now I'll probably hit Customize. So I'll add it to the cart. Well, I'll probably need to select the size first. And now that I'm here. Again, I have to try to get through this main navigation, and that's not working. So, what I am able to do as a user is that I can find a link above where I wanna be, and kind of, click and drag or right click, just give it focus. And then I can move through the site from there. All right, so it looks like checkout is an indicator, and is actually given a focus class. So, I'll go ahead and try checking out. And so as I'm going through here, you can see that all these errors are triggering, and that's fine because those should be triggering if there's something in there. But, one main thing to notice is that after phone number, there's this my billing information that's the same as shipping information, like the check box right there. There's no way to actually use that with keyboard. So as I type through here, you go from phone number down here to email address. And there's no way for me to say that I'm not younger than 13 years old. It also doesn't appear to be any way to actually change these shipping options. So, it's a click, but at the same time if you had a function where these were in the normal tab order, you could go through there and you could press space to select one as most radio buttons are supposed to operate. So after taking a look at this site, it's understandable why someone who is blind is not too happy that they aren't able to get through the site. Even someone with site that is only using the keyboard, is also going to be frustrated, because there is no focus, and in a majority of cases, you're gonna get stuck in that main menu, because you can't get through it. We'll take a quick look at the axe tool that we've been using throughout this course, and we have 42 violations. The majority of these are the form elements, don't have labels. And I believe that's most of these form elements right here, yep. There's no label attached which makes it tough for a screen reader to figure out what's going on. With no label, somebody can't understand that this is the first name and last name, and overall it's just a general bad experience for somebody that has to use assistive technology. And again, this isn't to point a finger and try to shame Reebok. This is something where if you look across the web, a lot of sites have accessibility issues. Now the hope is that in the next couple of years, a lot of these sites will start to move to something that is a bit more accessible and start to take account for users that may be unable to see the site or have to navigate through with a keyboard. I think at this point we've gone far enough into this site. And you kinda have a good idea what's it like to kinda go through a site and really see what some of the accessibility issues are. The best way to understand the guidelines is to just kind of read them. Go through the site and check through all the AA compliance and A compliance and see what you think applies to which one. Look at the success criteria and the failure criteria and see if a site hits those or misses on those. Now we've come a long way and we've used a lot of tools to assess a lot of different sites. And we've reached the end of the beginner's guide to web accessibility. In the next chapter we'll take a quick look back at what we've done so far in this course.

Back to the top