UAD8: Evaluating the Accessibility of Web Content with WAVE

[Intro Music]

Announcer: You’re listening to one in a series of presentations from the 2008 HighEdWeb Conference in Springfield, Missouri.

Jon Whiting: Welcome! We’re going to get started. My name is Jon Whiting and I’m with WebAIM. Just raise your hands just to get an idea of the group. How many of you are familiar with WebAIM? OK, so a few of you are, great! Good, that’s why you’re here.

WebAIM stands for Web Accessibility In Mind. Web Accessibility kind of a non-profit web accessibility organization. We’ve been in this business since 1999. I’ve been in for a little over five years so in web years 99’s quite a long time especially if you start thinking about how long that is in terms of accessibility. Just quickly want to mention our site because I know there might be some questions that I’ll be happy to answer questions by the way as you ask them. This isn’t really a presentation where I want to hold all questions in and if you have a question please just raise your hand.

But for those questions that we don’t have time to get to, I do recommend that you look at our site. We have a monthly newsletter, a blog, a very active email discussion list, introduction to accessibility, a whole lot of resources here. Do I sound weird? My mic really sounds kind of odd to me. I sound fine in the back?

OK, I just must be right under a speaker or something, it’s making me crazy. So anyway, this is just a little bit about WebAIM and I am trying to work to the only way I can seem to get this projector to work is to have this as a second monitor so I kind of have to type behind my back. We’ll see how that works. Another quick question, how many of you raise your hands if ever used WAVE, the tool WAVE? So again, only a handful, great! That’s why you’re all here and it just kind of gives me an idea of how much I should talk about kind of the basics of WAVE so with that in mind I just kind of get started here.

WAVE is – what is WAVE?  Just a few things of what it is. First of all, it’s a Web Accessibility Evaluation Tool. It’s a free tool so for any of you that are interested, we’ll kind of go into the tool in a second but it’s free for use. There’s also a toolbar we’re going to talk about a little bit later on it’s also free, a Firefox toolbar.

What does it do? It shows your web content with embedded accessibility indicators. I may not make a lot of sense what are embedded accessibility indicators. How many of you have ever used a report type accessibility tool? Bobby is kind of a popular one. Cynthia Says is another.

So I see a few hands kind of the same hands it looks like. [Laughter] I see a few hands and there are a lot of tools and there are some strengths of these tools but there are a lot of accessibility evaluations that kind of follow what I call a ‘report model’. That means you have you put your URL and something, it runs the test then you get sort of this table and it says, “Would you have pass this accessibility standards or guidelines. You failed these accessibility guidelines or standards.” And then there’s a whole bunch of check yourself because there are a lot of things that that can’t be checked with those tools and they have their place.

WAVE just follows a completely different philosophy and that is that accessibility really has the accessibility evaluation. It really has to come from a person. A person has to make some of these accessibility decisions. Most of them, you really can’t just say pass or fail so WAVE does is it embeds an accessibility information to your page. We’ll show that in quite a bit more detail later on.

WAVE is a free service provided by WebAIM and it’s also in beta. It’s been in beta for less time than Gmail that it might be on beta for a little while longer. There are a few bugs, if you do have some bugs, if you discover some bugs while we’re in this presentation or later on I do welcome that feedback, it is in beta. A couple of things I want to point out before we’re going on one thing, I am not the lead developer of WAVE. I’m sure I can answer some of your technical questions. Some of them maybe I can definitely send you on the right direction.

We’re a small group at WebAIM and there’s a very small development team but I’m kind of stayed out of the code. Part of that is because I am not a programmer and part of that is because I use WAVE as much as just by anyone probably more than even most the people at WebAIM and I want to stay out of the code. Oh, I thought you had a hand up there in the back. No, it’s not a problem I just feel like you have your hand up, you’re not looking at me so okay well no problem we’ll continue.

So some of the technical questions I may not be able to answer but most of them I probably should. OK, so those are the few things that WAVE does. What are the few things that WAVE does not do? First of all, it does not show you a complicated a report. There is no report mode in WAVE. There’s not a table that says ‘pass or fail’ and that is by design. We’ll talk about that even a little bit more as time goes on. It does not display code line numbers.        

For those of you that are familiar with some evaluation tools HTML validators, other tools that will give you lines in your code. Sometimes that can be valuable, you get this things and say, “You have an error in line 1422 of your code,” and that’s great. Oh good, 1422, I remember that line well. I remember when I wrote it I was sitting, drinking a cup of coffee and that’s not usually how most of us look at our code so it doesn’t do that.   

It doesn’t give you line numbers it does instead embed an information right there in your content where I think it’s more helpful for most developers. The other thing it does not do, it does not answer ‘yes or no’ to any accessibility guideline. There’s not a “You have pass section 508 model for accessibility. When I talk about accessibility guideline, there have been a couple of presentations that have already covered some of these but I’m going to give just sort of a quick very, very quick guide to some accessibility. By show of hands how many of you have heard of the Web Content Accessibility Guidelines?

OK, so almost all of you, great! A few of you have not. Web Content Accessibility Guidelines are a set of an international guidelines for accessibility. They’ve been around for a while. They’ve since the late 90’s which again really long time in web use but it’s a set of guidelines that is kind of a basis of almost all the other sets of guidelines or international law those guidelines from those came section well, more or less from those came Section 508.

How many of you have heard of section 508?  OK, all of you, there are familiar with Section 508. There have been other presentations talking about where section 508 applies and where it does not apply. For of those of you who haven’t, didn’t attend those sessions, Section 508 is a Federal procurement law meaning it’s a law for Federal agencies and it’s a procurement law meaning a law for the things that they buy. Are any of you from the Federal agencies in the room?

OK, well, then the question of whether Section 508 applies to you or does not kind of a complicated one. The answer is yes and no. No, it does not apply specifically to you because you are not Federal agencies buying anything. You’re not a federal agency but how many of you have grants from federal agencies or received any funding from federal agencies?

OK, I see a lot of heads nodding. That’s where it maybe apply to you so no one is going to sue you for violation of Section 508. You’re not a federal agency they can’t. What they can do is get really get mad at you for selling them something or receiving money and when you’re not complying with the guidelines of Section 508.

So it doesn’t really legally apply to you but it only applies to you if you want any money from the federal government. I don’t know if that helps it probably doesn’t clarify it at all. But that is federal law and it’s not just web law it covers all kinds of information technology. It even covers hardware, the computers, copy machines thing like that are covered in 508 but there are 16 checkpoints that are specific to web.

And a lot of people kind of consider those the – I don’t know I guess kind of a starting place for accessibility. If you understand those 16 checkpoints, you’re at least off to a good start. Probably all I’m going to say about 508 right now, I do have a poster that I’m going to be talking a little bit about sort of a study that I did of 100 randomly selected web pages two from each state of higher education and sort of the findings in terms of 508 compliance. So if you have any questions you can either come to me afterward. Grab me whenever you see me during the conference or please come to my poster.

So in addition to Section 508, we also have the Web Content Accessibility Guidelines 2.0 and that is a draft for kind of a next level of accessibility guidelines. 1.0 was very good, very inclusive in a lot of ways but it also was very much tied o HTML and current technologies. There’s a lot of things that in it for those of you that read it and say things like "until useragent support this or that." The problem is when the user agent support that?

There’s not really a line in the sand where you can say, “OK, today user agent support this and this, this checkpoint is no longer relevant.” Because there’s some of that language because it’s sort of tied to HTML and tied to us you know a point in time they’re really about 10 years old. They are trying to show their agents some ways so go back and explain a couple of the W3C, the Worldwide Web Consortium.

There are the ones that have created the first set of web content accessibility guidelines there and the final stages with the second set of web content accessibility guidelines or 2.0. Now, that set of web content – Oh no, it went to sleep. That set of guidelines is very different. It’s not nearly as limited in its scope. They’re hoping that this will last a little longer but the problem with that is because it’s not tied to HTML it uses a lot of this kind of fancy W3C, this language that they’re trying.

They’re trying to not have the same problem where they’re stuck in one point so because of that they use some terms that are a little difficult to understand and interpret like programmatically determinable and just words like that. They’re maybe aren’t quite as clear as some of the simple HTML language sets kind of those few ones and because I know there’s a little bit of interest some would say, “Where does the target lawsuit fit into those lawsuits I just talked about as the 508, what is it? It’s actually not 508. It’s 80A in addition to some California state discrimination law so most of you are probably familiar with the target lawsuit, an individual oblige individual from California with the National Federation for the Blind there is this lawsuit. Its target recently settled out of court became a class action lawsuit but they did settle out of court for it’s probably going to cost some right around $7 million.

Now, if you target $7 million may not be a whole lot of money but it’s still a fairly decent amount of money. But that was a settlement and it was actually under the Americans with Disabilities Act and with some California Discrimination Law is a little bit kind of some of us that the quick intro to some of these guidelines and standards and laws that people talk about. Now maybe that helps clarify why WAVE does not adhere to one specific set of guidelines.

They’re changing. They’re limited in their scopes some them and so WAVE just sort of we’ve taken the approach of giving you all the accessibility information. If you have a checklist that helps you go through whatever standard you’ve decided on, that’s great but WAVE is going to give it all to you. OK, so we just talked about this a little bit but a lot of times you ask as well, “Am I WAVE approved?” There’s a famous evaluation tool a while that called “Bobby.”

Bobby would offer a Bobby approved kind of a little logo if your site met kind of come to what Bobby set forth. And so a lot of people say, “Well, can I ever get WAVE approved?” You can’t, you cannot ever be WAVE approved you also will never be WAVE rejected and the reason for that is kind of what I mentioned before. WAVE helps people evaluate an evaluation process and there’s no accessibility tool that can do that for you and that’s the reality. I mean it would be great if there where tool that you could plug in, it could spider through all your pages and it could tell you pass all these, you fail all that.

There are a few things that those tools can do. They can look for missing alt attributes or maybe they can look at some problematic text. If you have alts, an alt text for all your images that says, “Image,” things like that. There are some things that can be determined by computer but the reality is the vast majority of accessibility information really a computer cannot make those judgments, only a person can.

It’s the philosophy behind WAVE and I think that’s the reality of accessibility evaluation a lot of thing you know great. I was really hoping that this tool would solve all my problems for me. It can’t do that but it really does a lot to make that information very clear to the user. It takes all that accessibility information and I guess exposes it, makes it visible.

OK, for those of you who aren’t familiar with WAVE, WAVE 4 the newest version WAVE does have a few improvements a few things that make it better than before. One of the big things we’ve added, we’ve added over 30 evaluation rules so a lot a lot of things that WAVE is testing for. We’ve also added a new framework that I’ll talk a little bit more about later kind of powered by Mozilla but one thing that has changed is we no longer offer user preferences. The main reason for that is because people don’t really use them and we also - WAVE has developed by WebAIM. It’s a free service.

We just do it because we want to. No one is funding it. We pay for it and we decided well, if we have this time which we spent on user preferences or better reporting, better rules, we decide better rules so they’re not user preferences. I you want, there’s no like 508 specific WAVE or you can’t disable certain icons. You can’t do that.

But that’s because we want to give it all to you and then some other improvements. We do have better reporting, different views, it does evaluate certain pages a lot better and things like iFrames and handles better, cleaner interface, ability to copy paste code history, toggle styles, a whole lot of things that are new in WAVE 4. OK, so how does WAVE work? Oh, it works basically.

You submit a web page, upload a file, submit codes somehow and WAVE first of all makes rid of the pages HTML. We got a lot of junk in our WAVE reports. The first thing I’m going to do is just kind of make sure that it’s HTML. And then we render it using the Gecko Rendering Agent which is the same engine that Firefox uses.

And part of the reason why and we represent we generate that virtual representation of that dom of the page. Now, part of why we do that is because that allows us to check your web pages a they’ve been rendered with CSS. It allows you to evaluate that dom so there are certain things that you can do with WAVE that you really can’t do with other reporting tools. Say you’ve got text and you’ve applied CSS to a text that makes it just really teeny-weeny.

WAVE can add an icon so you know this text looks like it’s probably a little too smaller. If you use CSS to create really big bold text WAVE can say, “I wonder if this is supposed to be a true heading.” It’s big, it’s bold, it’s short, looks like a heading to WAVE and it will give you a little icon to let you know that. Those kinds of things can be done because it evaluates the dom. And after that the pages checks again the WAVE rules and rules are created or like I should say I guess defined in a language called Leray.

It’s something that we’ve created just this reporting language. And then these icons are embedded into the page and the documents sent to the user. OK, and there are a lot of ways that you can submit content into WAVE, web address, upload a file, paste the HTML, Firefox toolbar which is very cool and we’ll talk about that in a while or you can also add links directly to WAVE reports on your site. So if you have wave.webaim.org/refer, allow the user to WAVE your page as it stands.

All right icons, we talked a lot about these icons. This is where we’re going to jump in and we’re going to start evaluating WAVE. I wanted to kind of rush to some of the beginning things because I do want us to spend some time evaluating your content with WAVE. A lot of you have laptops, for those of you who have laptops when we go to WAVE I invite you to run WAVE reports of your own. Ask questions about some of the icons you see, or if you don’t have a laptop, you can give me a URL and we’ll maybe spend a little time looking at that.

The icons are really divided into four sections. There are errors, errors are red. Errors are almost always bad. There’s really only one bug that we’re fixing right now that I guess you kind of call a ‘false fail’.

For those of you that this might be a little technical so if you don’t understand this don’t worry but it does tag a form element that does not have a label but does have a title attribute is a fail. And technically, screen readers assisted technology support well, almost always support an image is missing a form label but does have a title attribute currently that’s a fail in WAVE. That’s the only icon that possibly if you see that icon you may still that may not be a fail. Pretty much any other time that you see red, you can be confident that that is an error. It’s an error that even a computer can detect so that is a fail.

Yellow are alerts. It’s just saying, “Here’s something that you need to look at. This is something you should be aware of. This alternative text is problematic or this looks like it’s a heading or just things like that.”

Things that look like they probably have the potential to be accessibility errors and then a whole lot of other stuff too. It shows you when Java Scripts are being used. It doesn’t mean that every time you see that that you’re Java Script is inaccessible, it just let’s you know so that you can be sure to do that testing yourself. Finally you have green. Well, not finally we got two more.

We got green which we call accessibility features. These are usually good but not always that’s why you need to – that’s the power of WAVE. Of all of these things, one of the most powerful features in WAVE are these green icons. You as the user determine whether every time you see a green that’s really a good thing. And finally we just had some blue icons which are semantic structural icons.

Looks like you’re using a lap table. Looks like you’re using a data table. This is a heading. This is the level of the heading things like that and there’s a better explanation of those in the WAVE explanation of icons. OK, we’re going to go in there, go into WAVE for a little bit now.     

The URL is wave.webaim.org and invite those of you that want to go to the site wave.webaim.org and enter a URL. We don’t require the HTTP, you can put it in you can leave it up. I’m going to WAVE CNN hopefully I beat most of you, we’ll see. It’s been a little slow up here. Looks like its loading.

I’m actually going to cheat I already WAVED this page just in case my wireless is a bit slow. So, what do you see? WAVE has 68 accessibility errors and then you see some. It also has a couple of icons for things that are present in the head section.

Now, you see these accessibility errors. All these red icons again almost every time you see a red icon you can be confident that this is something that’s bad that needs to be improved. So I’m just going to go through a few of these icons and sort of explain them. This is definitely a time for questions. If you see a question for an icon that you have in your page, or an icon that you have here that I haven’t mentioned on this page, please raise your hand.

So a few icons. Here, this red icon right there. If you hover over the icons it will give you, if I can find my mouse, it will give you – the projector is having issues with that. Usually the rollover takes a little easier to read quickly what the icons mean because I can’t able to read it. For those of you that I don’t know if anyone is looking at WAVE on their own. If anyone is are you getting the clear icon text the gray background?

Audience 1: White.

Jon Whiting: You’re getting white as well?

Audience 1: White.

Jon Whiting: Oh man, that means they’re doing something to it right now. In a second I’ll send an email yell at the developer. It looks like they’re making some changes right now I didn’t notice that it is in beta. [Laughter] So that’s one of those beta things usually that’s a great much easier to read a gray kind of tool tip from. OK, so you see this little image right here, anytime you see an image that sort of that trapezoid shape that means that icon is related to an image.

All of the icons that shape related to images. Now, this one got a little hand and it’s got the little red with that kind of that scuba looking slash through it. That means a couple of things. OK, trapezoid it’s an image. Red it’s bad and the red is saying it doesn’t have an alternative text. There’s no alter attribute for that image.

The hand tells you this image is a link so this goes somewhere and it doesn’t have alternative text, this is bad. It’s bad for a few reasons. First of all this is the first link on the page link that goes to CNN not really clear where that link goes. Usually if a screen reader comes across the screen reader user comes across a link with a backup. I’m making assumptions here at the crowd. Screen reader is a program that individuals who are blind use that reads all of the content to them.

You can do basically anything you can do on a computer. Users who are blind can do with a screen reader assuming that is a couple of things. First of all, it must be machine readable. A few people have talked about that. That means anything that’s available in a non text format is available also in a text format. There’s a textural alternative for this.

Alt text is the text alternative for an image. So if a screen user comes across an image it may or may not be identified as an image but that alt attribute, that alt text will be read to the screen of the user. If it doesn’t appear a few things can happen. Typically what happens is that the filename of that image is what’s read. So in this case, if this is CNN logo well that’s great.

They probably have figured out that this is CNN logo and they know it’s a link. Now, if it’s 1,000,422 that doesn’t help you a whole lot actually it doesn’t help you at all so that’s what these errors are telling you. Here’s an image, no alternative text. You see there’s also a few images. Here’s one of these red ones.

This red one right here means that there’s a form element here it does not have a label and next to it you see the search box with the green icon next to go and next into blue text, submit. So submit is the alternative text for that image right there. Is there anyone see a problem with that alternative text?

Audience 2: I’ve just got a quick question.

Jon Whiting: Sure.

Audience 2: The red one…

Jon Whiting: The red one, this first one?

Audience 2: The one next to the form one

Jon Whiting: This one right here.

Audience 2: It doesn’t have a label. Is that the type of error that you have found…

Jon Whiting: Good, good question. This is actually not a false one. The only time it will be is if you see a little blue icon right next to it. This is title and this form element has an appropriate title and that isn’t necessarily an error. I mean technically it’s probably not correct but if the screen reader reads it, if it’s supported assisted technologies then it’s probably not an error. But in this case it’s not, it’s a true error it’s not kind of a false error.

It’s a true error because there is no title so there’s no accessibility information for this form element. Does that kind of answer your question? Great! OK, so does anyone looking now at this search button here? Is there anyone see a problem with that?

I’ll tell you it’s less than ideal. What’s that?

Audience 3: What’s the alt for Search?

Jon Whiting: Yes, the alt for that currently is Submit, it really should be search. Yeah, if the text is search that button should be search and that doesn’t mean that if someone using screen reader comes to this and sees the word submit they’re going to be completely lost but considering that there’s no label for this form element and now it’s Submit. Screen reader users, most of them, they’re like us some of them are very savvy, some of them are less savvy, and some people are seamless the first form element on a new site this is going to be a search box even if doesn’t tell me so. But currently, if you are screen reader user and you came to this form element, you wouldn’t know what it is and you wouldn’t really know what you’re submitting so little things like that.

This is an example of why WAVE is such a powerful evaluation tool. A reporting tool would see that submit and pass it I guess. Well, you’ve got a button it’s got alternative text that means you pass, hooray! WAVE shows you what that alternative text is and you as a user can look at that and say, “I’m not really sure that that’s as good as it should be, it should probably be something else.”

So that’s kind of power in WAVE that’s the strength we have then. We’re going to go through just a couple of other icons because I think the kinds of icons that you might be seeing. You see a bunch more of those red icons with the hand that means these are all images that are links. Next to it is you see this little Java Script that’s really just saying that there’s a Java Script there that’s again yellow it may or may not be issue in this case, it’s really not an issue. Next to it you see this and you see a couple of place in the site is H? that is just LC, we fixed it already.

That’s just WAVE telling you that this looks like it’s probably heading it’s big or it’s bold or whatever, it’s probably a heading. And headings are very important in terms of accessibility. It’s really one of those important things you can do providing this structural semantic markup to your page. There’s have been a lot of wonderful things that have happened with CSS I think more good than bad definitely but I don’t know how many times I’ve seen sites now where you have a little div and the class will be H2.

It’s just like, “Well, just make an H2 if the class is H2.” Now, then you have that semantic meeting and that can be very valuable, it’s valuable for a lot of reasons. First of all, it adds that structure to the site that makes it more valuable for quite often for search engines but also very importantly it makes that content accessible for somebody who is using a screen reader. A screen reader user can navigate by headings. They have a series of quick keys if they hit the H, every time they hit an H, they’ll navigate to a heading.

If they hit the numbers they can even navigate by level so one will take you to a heading one. Two will take you to a heading two and then to the next heading two on down like that. So adding headings can be very important in terms of accessibility. Here you see this icon with the H4 and there’s this little red next to them, that means you have a heading but there’s nothing in that heading and that’s an accessibility error that really can cause issues.

So little icons like that you’ll see a few here questionable alternative text for a link so here you’ve got a link and the text for that link is video. The problem is that you have a lot of images in this page with the alternative text video that go to different places and that can be confusing. It can be confusing for screen reader users, it can only be confusing for people who are relying on like a voice recognition to navigate through the page. A lot of times people using voice recognition will just say, “Video,” and it will take them to the link well, it means more than that but essentially they’ll take them to that link video.

What if there are 10 links that are video and they all go to different places. Little things like that that are revealed is alt equals alt just means that a lot of times in the page you have this redundant alt text. Again, referring to that video is video, video, video, video that’s just redundant and it’s a learning it, I’m not saying this is an error what I’m saying keep this in mind this is something you should be aware of. Now, actually I look real quick for a couple more.

You see quite a few of all the dials up today that’s good. I was watching a little bit of that yesterday. Man that was a train wreck too watch. Good thing I’ve got 30 plus years ahead of me before I get to retire but OK you’ll see up there a couple of right next to stock market missing form label, a button that does not have alternative text.

I’ll just give you some of these information here is a form element that does have some label. You see this green and then within that green, the brackets tell you what the – well, let me explain this one in just a little bit. You got the green label, you got these green brackets. The label is saying that this form element right here has a label. This is saying this is the label assuming that this four and this ID match.

Audience 5: I hope this is the appropriate time to bring up this…  

Jon Whiting: Sure.

Audience 5: You mentioned that the Java Script didn’t mean anything. I wonder there have been a number of presentations about jQuery and AJAX and that’s barely coming into vogue as an interface. Would you discuss some what are the dos and don’ts if we’d like to use those tools heavily…

Jon Whiting: Sure

Audience 5: What you should do in site links or…

Jon Whiting: So the dos and don’ts of kind of using Java Script and some of this AJAX some of the dynamic things we’re going that’s an excellent question and I won’t have time to give it a full answer but there’s a couple of things. First of all, a lot of these things that are being done, this very cool very dynamic things AJAX can be made accessible. One of the keys to that is making sure that if your event handlers are device either device independent or that your pairing device depended well. Mouse dependent and keyboard dependent event handlers together.

Can that maybe made keyboard accessible? Well, it probably could. One of the issues how do you let a user especially say a screen reader user know how you made that accessible. Have you used the left and right keys? Have you used the up and down arrows?

There’s not really a standard way to make some of those things accessible so technically yes that can be made accessible. The problem with that is how does the user get that information. I definitely don’t have time to go into much more detail and one other thing I’ll just mention it for those of you that have interest some of you may have heard of ARIA (Accessible Rich Internet Applications). What ARIA does is it allows you to build in some of that interactivity well, there’s a lot of things.

One of the main things that you can do with ARIA is you can build in some of that interactivity so you can say “This is a slider. Sliders are usually mass dependent.” You can say, “This is a slider, this is the start point, this is the end point.” You can add that information in a way that makes it accessible to a screen reader user and makes it keyboard accessible.

It’s great. It solves all of your problems except it’s currently not supported in Internet Explorer. Internet Explorer 8 is going to include support for ARIA but they may be doing it their own way you know Microsoft.

Audience 6: Is there a way that you can WAVE a secure page.

Jon Whiting: There is using the toolbar so I’ll show that in just a second but I’ll address it a little bit as long as you’re asking it. Yes, can you WAVE a secure page? You can use it in a Firefox WAVE Toolbar that is all local. So you can WAVE not only a secure page but you can also WAVE a page so you’re doing something dynamic. You can WAVE it at anytime.

It WAVES the dom. It WAVES it locally so you wanted to WAVE Gmail but you want to see how it looks once you have a chat window open, you can do that with a WAVE tool bar. So it’s very cool that way very helpful. I know a lot of you probably have local things that you’re working on.

The toolbar is a great solution for that. OK, I gave you a little bit of information about ARIA the problem being Internet Explorer does not support it yet and even when it does, people are a little concerned how it will support it so look at ARIA but it’s not the answer to today’s problems. It might be a great add-on. You make a kind of an accessible and you add in some ARIA to make it even more accessible assuming that there’s no conflicts and that’s great but it’s just not quite ready.

A couple of years it will be really a viable solution to our problems. OK, it wasn’t a perfect answer but hopefully that did give you a little bit of information. All right, now I beg your time for any other WAVE questions or if anyone would likely to WAVE a page that they have very quickly maybe I have time for one or two. Does anyone have a page that they’ve like me to throw up on the screen?

Audience 6: I have a question.

Jon Whiting: Sure.

Audience 6: Is there a way to integrate the interface into, for those you are using the CMS and you want to preview a feature and you want to integrate that the way that makes it on a WAVE Tool.

Jon Whiting: That’s a good question. So you’re using a CMS and you want to run the tool and preview the page something like that. It could be done probably currently the WAVE stands the best solution might be the toolbar. It probably could be done it’s something that and everyone wants to get this requests for little tweaks to WAVE to help organizations so some really could probably do. Currently the toolbar will probably your best solution which I know wouldn’t be they would have to first download the toolbar and second they have to initiate that but that’s probably the best solution right now.

The other option is that you do have kind of a few slides back we talked about a couple of ways that you can kind of right here – oops, I’m going the wrong way. One other possibilities that you could add possibly one of these options here to refer to server WAVE. If it’s in a CMS so there might be issues with the being password protected or that but this is one possible solution that you could add that refer link.

Audience 7: OK, get the Firefox and work on the Firefox

Jon Whiting: You can. It’d be great if you could download it from us just because we can keep a better eye on who’s using it and that. I will kind of go to the – if you want to download the toolbars as long as that’s we’re talking about. I will show you how. My wireless is really slow up here.    

Anyway, for those of you that are already there - OK so home page, there’s installed a Firefox toolbar also kind of a blog with information about the toolbar and updates and things like that. If you go to here and install the Firefox toolbar, download bar, it will be downloaded as it’s updated. You have those updates it checks periodically for updates so once you’ve downloaded it you will be able to update if we update it.

And there’s actually an update coming fairly soon. So that’s where you can download the toolbar. OK, so now that we’re talking about the toolbar, looking at this toolbar I already have it up there installed. You can do the same thing but you can do it locally. So say I have this WAVE page here I want to WAVE it.

Because Waving the WAVE page as you know disrupts the space time continue over or something like that and cause the internet to crash but I’ll try it anyway. So I WAVE this WAVE page and luckily it says, “I have no accessibility errors,” that would be embarrassing if it did. But you see that this page now has that information so all of that accessibility information is included in there. One thing that can be helpful I did want to mention about running WAVE report sometimes in some CSS there’s a potential for some things that overlap, makes it kind of hard to read some of your content.

Identify what icons belong to what. You can disable styles. We have a little link right up here to disable styles. Disable styles will just kind of linearize the page. Take your content out of your tables also linearizes at that way.

Now there are a few issues occasionally still when styles are disabled there might be a little of overlap but for the most part this is another view that can be helpful for you. OK, are there any other kind of specific…

Audience 8: Just a point yesterday.

Jon Whiting: Sure.

Audience 9: That’s right. You go back to WAVE a website, how would you report it right there?

Jon Whiting: Yes.

Audience 8: And since it worked then your code. So I could use that code in my website in terms of...

Jon Whiting: Yes.

Audience 8: Yes. If your website is clear that are accessible as well…

Jon Whiting: Like libraries and things like that.

Audience: Now, we can use that tool as a basis to create all this…

Jon Whiting: That little according effect you’re talking about this kind of effect here if I click on say upload a file then you get that according effect. That is accessible and that was actually from a library called “MooTools.” There are a few libraries out there. This one is from MooTools and some of the libraries are pretty accessible and MooTools is one that for the most part is accessible so yeah.

All right, does anyone else have any specific WAVE questions that they WAVE the page, they’d like to know what does an icon mean?

Audience 9: Why are pop-ups so bad?

Jon Whiting: There are not necessary. Now, you’re talking about pop-ups that you is the icon kind of this yellow icon that says this pop-up with that…

Audience 9: That yellow icon with a mirror.

Jon Whiting: OK. Why are pop-ups bad? Pop-ups the main issue with pop-ups is that they can disorient the user so you’re a user say if you are a screen reader user you will be alerted. But more than just screen reader users, first of all the kind of annoying for all of us. I think a lot of us have had issues with pop-ups. We open a pop-up and then we forget we’re in a new window, we go back, we have to close the window to continue so that general thing.       

Also they can be especially I guess distracting or disorienting for users that have cognitive disabilities so that’s part of why it’s yellow. It’s not red because we’re not saying every time you use a pop-up it’s bad. Saying it’s yellow make sure you need to use a pop-up and make sure that that pop-up and when possible alert the user that it opens a new window and that’s one of the best approaches.  

If it opens a new window, put in printc or add a little icon that say “New Window” something like that, a good question. Any other questions about specific icons? For those of you that hopefully you’ll be using WAVE after this presentation. For those of you that are using WAVE, I wanted your best resources is going to be this icons key.

Of you go to the icons key, again it’s very slow there you go, get a list of icons and then each one these is a link to kind of a longer description so you see something and you don’t go, “What in the world does that mean?” Oh, that means the images is still showing up what that means you have an image map with a hotspot that does not have an alternative text. Whatever the icon is this is a very helpful resource for those of you that are becoming more familiar with WAVE.

A couple of other things I want to show you are other views in WAVE. Definitely this WAVE report icon, the errors, features, and alerts is probably the most valuable view for most of what you’re doing and if I can find where my mouse is. There are other views so there’s a structure order view and that just like the name says it shows you the structure of that page. So you have a page and it will show you your tables if you’re using tables.

It will show you where those tables appear divs where those are used. It will show you reading order so little numbers will appear next to each one. This is where you use the toolbar because the server is slow. So you see the toolbar is quite a bit faster that’s one of the reason I intend to use it. So you see these little numbers that your reading order. You follow those numbers and that will tell you what your reading order and you can check that to make sure it’s accessible.

The next one is a text only view. In a text only view, I wouldn’t call it a screen reader view necessarily but it does give you an idea of what it might look like, what your site might look like to a screen reader user. It takes everything. Basically it strips out all of the styles. It takes all the images and replaces them with alternative text and if you have form labels that tell you the labels those kinds of things.

And it can give you an idea of what your site may look like. So if your site is pretty understandable in this view, your images makes sense and you can just see the alternative text things like that then chances are your site will be fairly friendly to a screen reader user. The last view here is an outline view. Outline view does just that. It shows you your outline so all your H1, all of your H2’s, all your H3’s if you have any gaps in that or anything that seems out of order so you start with an H4, the little yellow icon that alerts you to that but that gives you an idea.

You can look at your page, look at this view and think to yourself does that make sense? Is that the appropriate outline for you? OK, does anyone else have any questions I mean just quickly go back? Run through most of these already. Talked about the different views then talked about the toolbar so just kind of a last little slide here. What are we doing the future?  

One is we’re fixing bugs as they become some of we know that we’re working on, some of them maybe you can help us find. If you do, please contact us let us know if you find any little issues on improving our evaluation rules and our documentation. We’re working on an Enterprise version so hopefully we’ll have spidering and reporting capabilities as well because those do have their place and we’re working on the evaluation of non HTML content. We’ve already kind of done an ODF evaluator that’s more like of proof of concept but other formats hopefully.

And we’re also looking at customizing rules. Internationalization, we’ll probably do a Spanish language version if any of you have a questions about that and this one I do want to mention real quickly. We have received some funding to evaluate cognitive disabilities and then tie in some of out findings to WAVE. So if you have any questions on that, I’ll be happy to answer them otherwise are there any questions from the group? Great! Oh, a couple.

Audience 10: Just a quick question. Does it quickly check Flash…  

Jon Whiting: It does not and Flash is so hard to detect for accessibility. Honestly the best way to check Flash for screen reader accessibility kind of the only way is with the screen reader because of the way that it’s based. It’s not linear so you could have potentially if we figure out a way evaluate one point in time that’s not nearly as valuable for Flash but good question.

Audience 11: Can we go now to, what does structural programming do for it? 

Jon Whiting: It’s really just checking for reading order and more of just structural. I mean I don’t use it a lot. One of the things it is valuable for those checking reading order so you can make sure that your visual order and your reading order are the same especially if you’re using tables for layout that it can potentially be an issue in reading order.

Audience 12: So we catch it if the tags were close to the right order.

Jon Whiting: Does not do that good question though. All right, well great! Thank you very much.

[Applause]

Announcer: For more presentations from the 2008 HighEdWeb Conference visit HighEdWeb.org/2008 or sign up for our podcast and feed at HighEdWeb.org/podcast.xml

[End of Music]