Welcome to this presentation on using the WAVE Toolbar. My name is Greg Kraus, University
IT Accessibility Coordinator at NC State University. So what does the WAVE toolbar do? It does
a number of things, but today I want to highlight three aspects of it. First, it will check
Web pages for accessibility errors. Second, it will show you your document structure.
And third, it will linearize your page show you what order it would be read in by a screen
reader. So the WAVE toolbar is a Firefox add-in, and here I have an example page that has a
number accessibility errors with it. To start using it I'm just going to come up here and
click on "Errors, Features, and Alerts". And when I do that it will give you a message
telling you it found 19 accessibility errors and it will show me graphically where those
things are. So for instance here I can see that there's missing alternate text for this
image. Again, I'll see that same icon used in lots of places for missing alternate text.
But even for images where you do have alternate text it will show you what that alternate
alternate text is. In this case it shows me that the text here is "horizontal line graphic"
which in this case is probably a bit excessive and it really should've been a null string.
It'll show me other errors, like here it is again, alternate text missing from an image
in this case or here it shows me that I have form labels missing. It'll even detect if
your potentially just using font stylings to make your text look like headings instead
of using an actual heading. Some other cautions it will give you - this icon here will tell
you that there's an event handler present, to make sure you're handling that event in
an accessible way. You'll see the eyeball indicating that there's some invisible content
and to make sure that your handling that appropriately because if you ever do CSS display none or
visibility hidden it'll actually completely hide that from screen readers and they won't
be able to access it. Scrolling down the page we can see a couple of the other things it
will show you. Here it gives some other warnings for problematic link text. Anytime it detects
that you've done "click here" or something like that it's just giving you a warning to
give a bit more contextual link text there. And here will show me - it's saying I'm using
this a layout as a layout table because it doesn't detect any headers or anything here
so this really giving me some information to say I know I'm not using it as a layout
tables so now I know I need to go back and correct that. I'm going to reset the page
to show you some of the other features. So I click on the structure order this will show
me some of the underlying elements in my page like for instance this menu is constructed
with an unordered list or I have two items here that are an unordered list as well. Let
me show you page that has a bit more semantic markup on it to show you what the structure
order looks like in that case. See here I have this same page just written with better
semantic markups. When I click on structure order it'll show me things like here's a heading
1 here's a heading 2. Again it shows me list items, again a heading 2 and so forth. Let
me come back to this original page and I'm going to reset it again, and I'm going to
click on this text-only option and what this will do, this is kind of similar to turning
off your CSS but not fully. What this is doing is it's showing you what order the page is
actually going to be read in by a screen reader and this is important especially when you
have a lot of nested tables and you're using this tables for layout. So this, you can just
scroll down the page and you can see here how this table is going to be read - how it
linearizes it. Again this page isn't using a lot of complex tables but this is a useful
tool if you're using a lot of nested tables. And I'm going to go back to the original page
now one last thing I'll show you about this is the WAVE Toolbar - this exist as an add-on
in Firefox but there's also Web-based version. Sometimes it's useful to send your page to
the Web-based version. Occasionally you'll get an error - it'll say WAVE found an error
while you're running this within Firefox but you can't find the error visibly on the page
anywhere and sometimes then it is helpful to actually come over to this menu and choose
process that wave.webaim.org. When we go here it'll give you a similar type report but lays
it out just a little bit differently so sometimes if there was a hidden error you can more easily
find it. Here's the link to install the WAVE Toolbar. I hope you found this tutorial useful
and you will be able to use the WAVE Toolbar in making your Web pages more accessible.