Hi everybody. As you validate your pages, it's important to remember that syntax isn't enough. It's not okay if all of your tags open and close and you consider yourself done. You need to remember that accessibility is more than the syntax. It's the semantics of what's going on with those tags, what they mean, what they're letting users know. So let's talk about using the WAVE tool from WebAIM in order to validate your page. WAVE is located at wave.webbing.org and we're going to run through an example. But before we get too far I do want to warn you that WAVE can only be used on deployed sites or those sites that you've put up on the web. So when I go through this example you may not be able to work through it with your own code. But we'll go ahead and talk about different tools you can use if that's the case. So let's try to use that same example I had before. Where I had that file just basically with everything but the kitchen sink in it, where I've got the pictures and the calendars and things like that. If I go to the WAVE tool, you can see that it says hey, enter the web page address of the site you want to test. There's no direct input, there's no file upload, which means there's no way for me to test this file. So instead, I'm going to use a different example. Just so you can see how WAVE does work. The site that I am going to test is umsi.umich.edu. And I picked this site just because I know that there are going to be a lot of errors here. They've gone in on a site that looks really good, and I do know that they've put a lot of effort into, as far as being accessible. There are 76 errors on this page and 67 alerts. Now at first it might not be easy to figure out how do I see what those errors are or what those alerts are. It took me a little time to figure it out as well. But eventually I realized if you move off to the side, there's a flag icon that turned red as you hover over it. And when I click on that It'll actually show you what each of the errors are. And right away, I find out that 67 of those 76 errors are actually missing alternative text. Which is not surprising, because a lot of sites use tools to automatically upload images to their site. And a lot of these tools don't have a place for you to include that alt text. So, that's what's going on mainly with this site, is the missing alt text. But if I keep scrolling down, I can see that there are also such things as empty links. This happens quite a bit when people want some sort of decorative link, but it doesn't actually have any content to it. Also you can see that there are 67 alerts. Now alerts mean, as a tool, WAVE thinks there might be something going on but it can't be exactly sure. So they notice things such as suspicious alternative text or suspicious link text. What they mean by suspicious is not that it's lurking around somewhere. But rather, that text may not really be taken in context without being able to see the visual images or the links that go with it. They also have quite a bit of redundant title text, which means if somebody was using the screen reader, a lot of the stuff would be repeated, over and over again. So the WAVE does this nice job of showing you some of the top level errors very quickly, however it can't catch everything. There's always a need for a human to kind of go over and look at it as well. One of the places that this is clear is if you go up again near the top and you can see we can also click on a no-styles option. If you do that, you would actually, basically see what the page would look like if you didn't have any style sheets at all. This means you'd see what it looks to somebody who perhaps is color blind or to somebody who's using the screen reader. They would see what kind of text would be on there. So it's an interesting thing to look at your page and say is this really organized well. It's much more an idea of checking for your content and flow. The last option is the Contrast Checker. And to be honest, I have never written a page that has fully passed the Contrast Checker. It's very strict. In addition, it doesn't take into account background images, just actual link color, background color, font color, and different things like that. But you can go in and get some type of feedback on whether or not it thinks your site's doing a good job. The most important thing to remember though is that again it's always going to take a human to kind of step in and do these extra steps. So this might bring us back to the idea of what do you do if your site isn't deployed. You're just kind of working locally and you haven't decided to make that jump to putting your page on the web. Well, WebAIM does offer additional resources, a kind of quick checklist. And these are the kind of things that you can do with your site even if it's just on your computer. The kind of suggestions that they make, if you decide to go onto this site, would be to test with WAVE, or if you can't do that, use a checklist. Go ahead and check your keyboard accessibility. Test your content scaling. Test with a screen reader. There are lot of other things you can do even if you can't get WAVE to work for you. So I encourage you to go of use this checklist and see what kind of tests you can do on your site that you wouldn't have thought about otherwise. Again I'd really like to encourage some people to use this as one of your extras on your portfolio. Take that extra time to make sure that your site is as accessible as it can be.
