Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:23Length:2.5 hours
Access 1
  • Overview
  • Transcript

2.7 WAVE Chrome Extension

The WAVE Chrome extension is one of the more robust tools in the browser we’ll cover and gives a pretty good visual of all the issues/notices. Give it a shot and see what you can find.

Related Links

2.7 WAVE Chrome Extension

Hey there, John Hartley with Tuts+ and in this lesson, we'll be taking a look at the WebAIM wave chrome extension. So, WebAIM is web accessibility in mind and they've been doing this since about 1999, so they know a little bit about web accessibility. They've made a great tool called WAVE, and it's the Web Accessibility Evaluation Tool. As you can see, you click on it over here in Chrome, and then it'll give you a summary with the errors, alerts, features, etc. So let's move to a site that actually has some errors. We'll hop over to ESPN. And we'll go ahead and turn on WAVE. As you can see, we've got a few more errors here than the WebAIM site did, 292 or so. You can then click on the errors panel, and see what a majority of the errors are. Here it looks like a lot of the culprits are images that do not have alt text. This is something that with a screen reader would be difficult. So we can click on one of these but nothing happens. So let's take a look down here at the code. And we can see that it is an icon. Icon insider bigger. It's got a class but it doesn't have any alt text which means that a screen reader would not be able to read it. And you're gonna see that for a majority of these, we'll click through a couple more. So here we have an image again, no alt text, and here we have another one. And you can see it in this code. So pretty cool that it shows you where it is in the code. All of the little symbols on the page can get a bit distracting, but it allows you to click on the icon itself and take a look. Okay, this link contains no text. And you can see down here in the code, okay, it does contain no text. Another nice thing is that you can filter between different specifications so double A, single A, or section 508. If you aren't sure what one of these means, you can click on the i and it explains in a bit more detail. Also it tells you where in the standards and guidelines that it is actually located. So 1.1.1, non-text content, and that's Level A compliance. One of the other nice things is that you can turn off all styles on your page. So we do that and we don't see anything but we can start to scroll down and we see the layout of the page without any actual styling on it. So this gives you kind of a higher level overview of what's going to be on your page. So we'll turn styles back on by clicking on contrast. So styles come back, and now we see there are 182 very low contrast issues. We'll get into some of the finer details of color contrast here shortly. But for now it's nice to know that WAVE has this. And when you're done testing with WAVE, you can just click on the WAVE icon again. It disappears and we go back to the page as it was when you first arrived. Again, this is a Chrome extension and it's free and you can use it to kind of get a quick look at whether a site is accessible or not and the different things that you'll have to take a look at as you're moving through to fix them.

Back to the top