4.1 Finding Violations
1.Introduction to Accessibility4 lessons, 12:12
2.Tools for Testing8 lessons, 30:06
3.Fixing Common Accessibility Mistakes8 lessons, 1:20:23
4.Real Site Testing2 lessons, 23:50
5.Conclusion1 lesson, 02:03
4.1 Finding Violations
Hey, John Hartley here with Tuts+ and A Beginners Guide to Web Accessibility. In this chapter, we'll be looking at a site mentioned earlier in the course that was hit with a lawsuit, claiming that the site was not accessible to blind users. Now that we're armed with the knowledge of what to look for when checking and developing accessible websites and some testing tools to figure that out, it's time to take a look at putting these ideas to the test. I've decided to take a look at the Reebok.com site, the one that was under scrutiny for being inaccessible in the Del-Orden against Reebok case. The main areas where the plaintiff was most concerned was navigating the site with a keyboard and being able to read alt text of images. And also being able to check out with the help of someone else. I've taken a look at a few of these pages, grabbed the raw HTML and styled them to look the same and act the same. But the idea here is to take this site and adjust it to make it more accessible. Hopefully, through this exercise, we'll be able to see where mistakes can be fixed and how something so inaccessible can be made much better with just a few tweaks. This is not an attempt to shame Reebok.com or anything along those lines. This is just an example of a site that is tough to navigate with a keyboard. Meaning, as the case states, impossible for a blind user to navigate and purchase anything by themselves. The first thing I'd like to do is use one of the tools that we discussed in chapter 2. And that's the aXe Chrome extension. Once we open up the site and also open up aXe, we can analyze the site. And you'll see that there are 24 violations that have been found. 12 of these are color contrasts. So taking a look at the first one here, we can inspect, and we'll see that it comes over here with the shop crossfit. And aXe tells us the exact contrast ratio, and tells us the foreground and background color. And one of the easiest ways to do this is to go to a site called Colorable. And this is a GitHub demo that is actually pretty cool, because you can put in the foreground and background color. And that's something that they give you here from aXe. And you can actually put it in and then adjust those colors. So, I'll update this to #fff, and we can see that this is the color contrast that aXe is seeing in here. So we go to Colorable, we could adjust that. But what I think we should do is just update that so that the white background is always there, and the text is there. Now this is something that, as a developer, you would wanna run by your designer and say, hey, let's think of a different way to do this. The color contrast isn't quite there. And generally, you'll be able to come up with a good solution. So in this case I'll go ahead and do that. For the sake of time I've made two separate copies. One here at the beginning and then once that's updated. I'll go over the updated one in between each of these results. So then for violation 2 we have same thing, we have a shop combat, and then we'll also have shop studio as the third violation. Fourth violation comes to us in the bottom here, and that is the products. And all of these H5s throughout are going to have low contrast ratio. And it's not too bad. It's at 3.21, so a little tweak will allow us to make that color contrast ratio pass AA accessibility. And that is the same for the majority of those, and we come across sign up right here, so this red on the background here. That is actually a 1.8, so we have a lot of work to do, so let's go ahead and grab that. And we can go over to Colorable, into the foreground. And then we have our background color as well. So we can see that in this situation, once it's actually bigger, it's harder to tell the difference. And you can start to adjust these sliders a little bit. So we could make this darker for the background color. We could change the hue a little bit, but then that starts to get into a purple. We could change the saturation, but then it's harder to see and goes gray. Or we could change the lightness. The lightness is the one that's gonna help the most. But overall, we're getting into the situation where it's not all that helpful. Because we want that distinction between sign up and other letters. So this may be a case where a different color besides red is the better choice. So a yellow or a green, even though those aren't really located on the rest of the site. So again, for these types of decisions you're gonna wanna poke your designer and say hey, what should we do in this situation? What do you suggest? And having that conversation will really help out in future projects and both of you will be happier for it. The final one for color contrast is down here, and again that will just take a light tweak to bump up that color. Now I've updated those colors and you can see we have that one updated, we got that updated as well. And that gray, you won't really notice much of a difference between the two. And that's because it's still very similar. It's just bump up a little bit to meet that 4.5 to 1 contrast ratio and made this white just for now. So half of our violations are gonna be fixed but 12 still remain for the home page. Four of them are images, two are right at the top and I would argue are decorative. One is right at the top and I'd argue it's decorative. So this image right here, you could have all text of woman exercising. Or get more specific about what the actual workout is and talk about being in a gym, something along those lines. Again, all text is something that, you can be as descriptive as you want or you can kinda do the bare minimum. It's all about what you want the user to actually experience on your site. So someone using a screen reader, what do you want them to hear? If this is not gonna be pertinent to your information, then maybe you just make it alt equals nothing inside, and you let it go. So the second violation is going to be this image right here, and I would imagine that if follows that those to are as well. So that's our four total image violations on this site. And none of them have alt text. So again, for each of these you could argue that they are decorative. You could also argue that maybe man using a speed bag would be a good alt text or holding some sort of yoga pose. And a gym of people doing a Crossfit workout. So any of those alt texts would be totally fine. So let's move on to the next violation. We have form elements must have labels. And this refers to the search input up here. So this does not have a label. My suggestion would be to add a label. Make it visually hidden so it doesn't break the design at all. That just explains a little more what the actual input is. So you can see in the finished one I said, search the site to find the list of results. And this is kind of important. It's the for, and that looks at the id of the input that the label's gonna be for, and that's how it attaches the two together. And then I gave it a class of visually-hidden, and because I have that in CSS, it will now hide that content but still make it screen reader accessible. Hopping back over, we can take a look at links must have discernible text, and this was brought up in chapter three. It is these four and this right here. So we have a Twitter link, a Facebook link, Instagram and Pinterest. All very common things on websites but they've opted to use an icon font, also very common. But in doing that, they have nothing inside the anchor tag. So if we look at the HTML that aXe has shown us, sure enough, nothing inside of there. It just gives it a class, and I believe on the before, it dictates what the actual icon is going to be. This is a case where using aria-label to fix a solution is actually a really good idea. And I'll go ahead and show you on the code. These are the footer icons that we were just talking about, and I've added aria-label, Follow us on Twitter. Like us on Facebook, Follow us on Instagram, and Follow on on Pinterest. Another item you may have seen in the aXe description right here for the HTML is that they also have target _blank. And we discussed previously that target-blank is not a good idea, normally. Social media is one of those where maybe it should open a new tab, maybe it shouldn't. If that were the case, then make sure in that aria-label you explain this will go to a separate tab. Warning the user and letting them know hey, this is going to have functionality that is different from the usual, will be incredibly helpful. So that takes care of four of the discernible text issues. And then we get to the fifth one which is this gift card. So it's gift card, and it's got this Reebok image inside. And it's a link, but there's no equals on the alt attribute. They have alt in there, they just haven't added ="". And to pass the discernible text inside a link, we'll need to add some alt text in here. So what I've done is just add the alt text of Buy Reebok Gift Cards and that should satisfy that. We'll hop back to aXe and we can see we're only down to two issues now. So this is one that deals with info and relationship so 1.3.1 and this is where html best practices and semantics comes into play. Technically, you are not allowed to have anything besides a list item, a script, or a template inside of an unordered list. And these lines right here, that is actually a horizontal rule, so an HR. And I'll go ahead and inspect that so that we can see. And right here you have hr class footer. And so by removing those, and if we rerun aXe, we should be down to 23. And there we go, 23 violations found. But you may say, well that breaks the design. The design isn't the same anymore. So we'll go ahead and we'll fix that with CSS. Add a class to whichever list item is going to have that extra space at the bottom as well as that line. And then in CSS you can adjust it. Now the final violation that aXe has found Is that something has a tab index that is greater than 0. And that is actually the input here at the top of the page. So the search input has tabindex="1". So the first tab on the page will actually go directly to the search input. As we talked about in chapter 3, the first tab should always go to a bypassable access. So skip to content, skip to main menu one of those. But on this site, it will actually take you directly into the search button. Now I think this was done with the best of intentions cuz it would make sense. Hey, someone's new to the site they tab and they go directly to the search input. They can search for whatever they want. They don't even have to see this home page. And they can get to exactly what they're looking for. So I think the intention was good but it wouldn't pass compliance. So remove that and it should be totally fine. Now this page, I've made all those updates and you can see here that those are all in there. And this search no longer has tabindex="0". If we open aXe and analyze the page, we should get zero errors, and sure enough no violations found. And it says congratulations, not accessibility violations found. Now you should perform manual testing using assistive technologies like NVDA, VoiceOver, and JAWS. We won't quite to that extent, because then will get into a lot of other things that we could fix. But what I do wanna show you is what happens when we try to tab through the site and that will be in the next lesson.