1
00:00:07,750 --> 00:00:13,650
One of the things I'm really hoping that students will do is validate their code.

2
00:00:13,650 --> 00:00:15,885
You can validate it for syntax,

3
00:00:15,885 --> 00:00:18,665
but you can also validate it for accessibility.

4
00:00:18,665 --> 00:00:24,275
So, today I'm going to show you how I use the WAVE Tool to test different sites.

5
00:00:24,275 --> 00:00:29,525
I went in and I check to find some of the top 10 visited sites for 2018,

6
00:00:29,525 --> 00:00:31,085
and I found Google,

7
00:00:31,085 --> 00:00:35,005
Wikipedia, Reddit, Yahoo and, Amazon.

8
00:00:35,005 --> 00:00:37,610
So, let's just do a little investigation to

9
00:00:37,610 --> 00:00:41,240
how well each of these sites addresses accessibility.

10
00:00:41,240 --> 00:00:43,385
There's two ways to test.

11
00:00:43,385 --> 00:00:50,320
One is to actually go to the Wave site, which is wave.webaim.org.

12
00:00:50,320 --> 00:00:56,510
From this site, you can actually copy and paste the address of any page you want to test,

13
00:00:56,510 --> 00:00:58,240
and this is a great way to do it.

14
00:00:58,240 --> 00:01:03,560
Personally, what I did is I went ahead and added the wave extension to my page.

15
00:01:03,560 --> 00:01:05,285
So, if you look right here,

16
00:01:05,285 --> 00:01:08,660
it's possible if you own your computer to download

17
00:01:08,660 --> 00:01:11,750
an extension that looks just like this over here,

18
00:01:11,750 --> 00:01:15,860
this little tiny W, and it makes my life a little bit easier,

19
00:01:15,860 --> 00:01:20,135
because it lets me actually just click on this button rather than going to the Wave site.

20
00:01:20,135 --> 00:01:24,440
So, let's go ahead and check out some of these sites.

21
00:01:24,440 --> 00:01:26,890
I'm going to start with Google.

22
00:01:26,890 --> 00:01:30,554
I'm at Google, I'll click the "Wave validator",

23
00:01:30,554 --> 00:01:34,265
and it's going to go through and check for any errors that might see,

24
00:01:34,265 --> 00:01:37,830
and in this case, we have two errors.

25
00:01:39,670 --> 00:01:43,410
In both cases, the errors are that we have empty links.

26
00:01:43,410 --> 00:01:45,420
Somewhere on this page,

27
00:01:45,420 --> 00:01:48,495
there are links that don't really link to anything.

28
00:01:48,495 --> 00:01:51,035
Now, I'm trying to find them and you can't see them on here,

29
00:01:51,035 --> 00:01:56,150
but that's because Wave checks for all the different variations of your page.

30
00:01:56,150 --> 00:01:58,145
So, while it might look good on the desktop,

31
00:01:58,145 --> 00:01:59,930
it doesn't always look good on say,

32
00:01:59,930 --> 00:02:02,390
your phone or a mobile tablet.

33
00:02:02,390 --> 00:02:03,995
Google did pretty well.

34
00:02:03,995 --> 00:02:06,660
Let's go ahead and check out Wikipedia.

35
00:02:08,360 --> 00:02:12,370
Here on Wikipedia, I'm going to wave it.

36
00:02:18,460 --> 00:02:20,480
Sometimes, it takes a second,

37
00:02:20,480 --> 00:02:22,050
I always forget and I need to be really patient,

38
00:02:22,050 --> 00:02:25,430
because if you click on it and then you click on it again too quickly,

39
00:02:25,430 --> 00:02:27,050
that's how you turn it on and off.

40
00:02:27,050 --> 00:02:28,410
So, I clicked on wave,

41
00:02:28,410 --> 00:02:30,485
I'm going to wait for the few more seconds,

42
00:02:30,485 --> 00:02:33,060
and you can see that once again, Wikipedia,

43
00:02:33,060 --> 00:02:36,545
like Google, did a pretty good job of addressing accessibility.

44
00:02:36,545 --> 00:02:41,270
They have one empty button and what they call missing form labels.

45
00:02:41,270 --> 00:02:43,310
What that means is down here,

46
00:02:43,310 --> 00:02:46,295
there's some place they would like us to type something in.

47
00:02:46,295 --> 00:02:49,920
But, someone who is vision impaired might

48
00:02:49,920 --> 00:02:53,490
not know exactly what is it you want me to type in?

49
00:02:53,490 --> 00:02:56,680
So, both these little buttons right here say, "You know what?

50
00:02:56,680 --> 00:02:59,830
It would be a really good idea if you would add a form label,

51
00:02:59,830 --> 00:03:02,480
so somebody knows what it is they're typing in."

52
00:03:02,480 --> 00:03:06,200
The form label here might be search query,

53
00:03:06,200 --> 00:03:10,705
and the form label on this blue button might be hit me to perform search.

54
00:03:10,705 --> 00:03:13,065
Still, three is really good.

55
00:03:13,065 --> 00:03:15,620
So, let's go to Reddit.

56
00:03:15,620 --> 00:03:17,420
Reddit is a very popular site,

57
00:03:17,420 --> 00:03:21,080
a lot of people use it to feel better about themselves,

58
00:03:21,080 --> 00:03:22,940
because they think who would ask that question,

59
00:03:22,940 --> 00:03:26,465
and other people go here for real reasons to find out an information.

60
00:03:26,465 --> 00:03:28,070
It's such a popular site.

61
00:03:28,070 --> 00:03:30,545
I'm really hoping it'll be accessible.

62
00:03:30,545 --> 00:03:38,525
But according to Wave on their last rendition Reddit had, let's take a look.

63
00:03:38,525 --> 00:03:44,650
All right, and from here we can see that Reddit has 73 errors.

64
00:03:44,650 --> 00:03:49,100
Not surprisingly, because there's so much user-driven content.

65
00:03:49,100 --> 00:03:52,565
There's a lot of people uploading pictures or typing things in,

66
00:03:52,565 --> 00:03:54,875
and they don't know about accessibility.

67
00:03:54,875 --> 00:03:57,255
They don't know about things like, "Wow,

68
00:03:57,255 --> 00:04:02,180
I should really be adding my alt text to these different images."

69
00:04:02,180 --> 00:04:04,835
Otherwise it's going to be hard for people to access them.

70
00:04:04,835 --> 00:04:07,025
Or you can look down here.

71
00:04:07,025 --> 00:04:09,050
In fact, that's exactly what it is.

72
00:04:09,050 --> 00:04:11,350
It's missing alternative text here.

73
00:04:11,350 --> 00:04:15,860
Oops, missing alternative text here and missing alternative text.

74
00:04:15,860 --> 00:04:18,965
Lots and lots of missing alternative text.

75
00:04:18,965 --> 00:04:22,130
The another thing that Wave really tries to get people to avoid

76
00:04:22,130 --> 00:04:26,385
doing is having empty links.

77
00:04:26,385 --> 00:04:30,380
This idea of links that you don't know where they're going,

78
00:04:30,380 --> 00:04:34,850
and they also really don't like redundant links.

79
00:04:34,850 --> 00:04:39,350
Just makes it hard for people who are using the computer via keyboard to

80
00:04:39,350 --> 00:04:44,080
have to click so many times to just get to the same information over and over again.

81
00:04:44,080 --> 00:04:47,655
So, unfortunately, Reddit not great for accessibility,

82
00:04:47,655 --> 00:04:52,920
but really good for my example here in this video on checking your pages.

83
00:04:53,600 --> 00:04:56,685
The next one I'm going to do is,

84
00:04:56,685 --> 00:04:58,350
just said Yahoo in general.

85
00:04:58,350 --> 00:05:00,230
So, I picked a Yahoo Sports.

86
00:05:00,230 --> 00:05:04,310
We can take a look and see how this sport side is going.

87
00:05:04,310 --> 00:05:07,170
Now, unlike Reddit, this is

88
00:05:07,170 --> 00:05:09,410
professionally commercial software system

89
00:05:09,410 --> 00:05:12,350
where it's people who are being paid to upload the content.

90
00:05:12,350 --> 00:05:15,620
So, we'll hope that there's a little bit more accessibility here.

91
00:05:15,620 --> 00:05:19,125
So, here on Yahoo Sports,

92
00:05:19,125 --> 00:05:20,940
you can see that I've got 44 errors.

93
00:05:20,940 --> 00:05:25,025
So, that's just take a look at what general things they're missing.

94
00:05:25,025 --> 00:05:27,110
Well, it's alternative text,

95
00:05:27,110 --> 00:05:29,340
which is funny if you look at it,

96
00:05:29,340 --> 00:05:30,500
you can see that they're saying, "Ooh,

97
00:05:30,500 --> 00:05:32,750
lots of places you're missing alternative text,

98
00:05:32,750 --> 00:05:38,495
and that must mean right here each one of these little scores is not text,

99
00:05:38,495 --> 00:05:40,295
it's actually an image."

100
00:05:40,295 --> 00:05:42,445
This gets people into a lot of trouble.

101
00:05:42,445 --> 00:05:47,050
Sometimes, you want to put an image up on the screen and it's really not decorative,

102
00:05:47,050 --> 00:05:48,845
it's telling a complete story,

103
00:05:48,845 --> 00:05:52,185
and in that case, alternative text is so important.

104
00:05:52,185 --> 00:05:54,710
Otherwise, people with vision impairment may

105
00:05:54,710 --> 00:05:57,695
not be able to see what the score is for the various games.

106
00:05:57,695 --> 00:06:00,454
All right, the last one I'm going to do is Amazon,

107
00:06:00,454 --> 00:06:04,800
and I think I'll do that one straight from the WAVE Tool.

108
00:06:05,090 --> 00:06:09,705
So, I go here, I typed in Amazon.com,

109
00:06:09,705 --> 00:06:12,380
and Amazon is not doing too badly.

110
00:06:12,380 --> 00:06:15,650
You can see they have the same problems that most people do.

111
00:06:15,650 --> 00:06:20,555
It always comes down to this missing alternative text, right there.

112
00:06:20,555 --> 00:06:22,850
There's a few reasons for this.

113
00:06:22,850 --> 00:06:26,960
On some sites, the public is uploading the pictures,

114
00:06:26,960 --> 00:06:29,300
and they don't know about alternative texting,

115
00:06:29,300 --> 00:06:31,060
so we have to educate them about it.

116
00:06:31,060 --> 00:06:35,605
Sometimes, it's because we've written programs to update the sites,

117
00:06:35,605 --> 00:06:38,780
and unfortunately, computers aren't very good at

118
00:06:38,780 --> 00:06:42,260
knowing what alternative texts they should add to pictures.

119
00:06:42,260 --> 00:06:47,870
Unfortunately, it's also because some people do know and they just don't really care,

120
00:06:47,870 --> 00:06:49,195
think it's that important.

121
00:06:49,195 --> 00:06:51,265
So, as much as possible,

122
00:06:51,265 --> 00:06:56,465
I want you to add syntactic and semantic clues to all your code.

123
00:06:56,465 --> 00:06:58,880
Make sure people who are looking at it or

124
00:06:58,880 --> 00:07:02,880
listening to it have the greatest possible experience.