One of the things I'm really hoping that students will do is validate their code.
You can validate it for syntax,
but you can also validate it for accessibility.
So, today I'm going to show you how I use the WAVE Tool to test different sites.
I went in and I check to find some of the top 10 visited sites for 2018,
and I found Google,
Wikipedia, Reddit, Yahoo and, Amazon.
So, let's just do a little investigation to
how well each of these sites addresses accessibility.
There's two ways to test.
One is to actually go to the Wave site, which is wave.webaim.org.
From this site, you can actually copy and paste the address of any page you want to test,
and this is a great way to do it.
Personally, what I did is I went ahead and added the wave extension to my page.
So, if you look right here,
it's possible if you own your computer to download
an extension that looks just like this over here,
this little tiny W, and it makes my life a little bit easier,
because it lets me actually just click on this button rather than going to the Wave site.
So, let's go ahead and check out some of these sites.
I'm going to start with Google.
I'm at Google, I'll click the "Wave validator",
and it's going to go through and check for any errors that might see,
and in this case, we have two errors.
In both cases, the errors are that we have empty links.
Somewhere on this page,
there are links that don't really link to anything.
Now, I'm trying to find them and you can't see them on here,
but that's because Wave checks for all the different variations of your page.
So, while it might look good on the desktop,
it doesn't always look good on say,
your phone or a mobile tablet.
Google did pretty well.
Let's go ahead and check out Wikipedia.
Here on Wikipedia, I'm going to wave it.
Sometimes, it takes a second,
I always forget and I need to be really patient,
because if you click on it and then you click on it again too quickly,
that's how you turn it on and off.
So, I clicked on wave,
I'm going to wait for the few more seconds,
and you can see that once again, Wikipedia,
like Google, did a pretty good job of addressing accessibility.
They have one empty button and what they call missing form labels.
What that means is down here,
there's some place they would like us to type something in.
But, someone who is vision impaired might
not know exactly what is it you want me to type in?
So, both these little buttons right here say, "You know what?
It would be a really good idea if you would add a form label,
so somebody knows what it is they're typing in."
The form label here might be search query,
and the form label on this blue button might be hit me to perform search.
Still, three is really good.
So, let's go to Reddit.
Reddit is a very popular site,
a lot of people use it to feel better about themselves,
because they think who would ask that question,
and other people go here for real reasons to find out an information.
It's such a popular site.
I'm really hoping it'll be accessible.
But according to Wave on their last rendition Reddit had, let's take a look.
All right, and from here we can see that Reddit has 73 errors.
Not surprisingly, because there's so much user-driven content.
There's a lot of people uploading pictures or typing things in,
and they don't know about accessibility.
They don't know about things like, "Wow,
I should really be adding my alt text to these different images."
Otherwise it's going to be hard for people to access them.
Or you can look down here.
In fact, that's exactly what it is.
It's missing alternative text here.
Oops, missing alternative text here and missing alternative text.
Lots and lots of missing alternative text.
The another thing that Wave really tries to get people to avoid
doing is having empty links.
This idea of links that you don't know where they're going,
and they also really don't like redundant links.
Just makes it hard for people who are using the computer via keyboard to
have to click so many times to just get to the same information over and over again.
So, unfortunately, Reddit not great for accessibility,
but really good for my example here in this video on checking your pages.
The next one I'm going to do is,
just said Yahoo in general.
So, I picked a Yahoo Sports.
We can take a look and see how this sport side is going.
Now, unlike Reddit, this is
professionally commercial software system
where it's people who are being paid to upload the content.
So, we'll hope that there's a little bit more accessibility here.
So, here on Yahoo Sports,
you can see that I've got 44 errors.
So, that's just take a look at what general things they're missing.
Well, it's alternative text,
which is funny if you look at it,
you can see that they're saying, "Ooh,
lots of places you're missing alternative text,
and that must mean right here each one of these little scores is not text,
it's actually an image."
This gets people into a lot of trouble.
Sometimes, you want to put an image up on the screen and it's really not decorative,
it's telling a complete story,
and in that case, alternative text is so important.
Otherwise, people with vision impairment may
not be able to see what the score is for the various games.
All right, the last one I'm going to do is Amazon,
and I think I'll do that one straight from the WAVE Tool.
So, I go here, I typed in Amazon.com,
and Amazon is not doing too badly.
You can see they have the same problems that most people do.
It always comes down to this missing alternative text, right there.
There's a few reasons for this.
On some sites, the public is uploading the pictures,
and they don't know about alternative texting,
so we have to educate them about it.
Sometimes, it's because we've written programs to update the sites,
and unfortunately, computers aren't very good at
knowing what alternative texts they should add to pictures.
Unfortunately, it's also because some people do know and they just don't really care,
think it's that important.
So, as much as possible,
I want you to add syntactic and semantic clues to all your code.
Make sure people who are looking at it or
listening to it have the greatest possible experience.