WAVEing for Accessibility

Through the past several weeks and months, I've been getting much more familiar with Accessibility testing and some of the areas that we should be aware of when we do this kind of testing. Most of my efforts have been focused on trying to get two primary applications to work with our product. These tools are JAWS (a screen reader for visually impaired users) and Dragon (a speech processing application for those who may have physical limitations working with a standard keyboard and mouse).

As i was trying to look to see if our product was working, much of my time was spent manually using JAWS and Dragon, and then pointing out to the developers where we weren't providing enough information. During this process, the lazy bones in me kept saying "seriously, isn't there something that we can use that can speed this up? Do we really have to listed to or talk to the page to see what it's set up to do?"

Thankfully, the answer is "yes, there is something we can use that can allow us to check accessibility aspects of pages." There are actually several, but one quick, easy and free way is to use WAVE.

What WAVE lets users is quickly analyze areas that might be problematic from an accessibility standpoint, and allow the user to preview them based on the importance of those issues. For example, WAVE did a quick analysis of TESTHEAD and found the following issues:

A more detailed inspection gives us the following:

In addition to errors, it can also show you what you are doing "right" with your pages:

Ever wonder how your site looks when its styling is turned off? In general, we don't like to think about this in this day and age, but it's col to get a quick glimpse... is our site organized in a way that is genuinely useful if all the eye candy disappears?

Curious to know how your site fares in a simple contrast test? For the record, TESTHEAD fares terribly. Much as I like the design, it's giving me pause and making me reconsider my aesthetic conceits.

The examples above use the WAVE site. You can also bring the exploration closer to home with the  WAVE toolbar (currently only available for Firefox). Here's how I look from the "Errors, Features and Alerts" perspective.

Ever wondered where the tab key will take you in your pages? I never used to think about this, but since I work with JAWS regularly, I think about it a lot more. Pretty sad to think that, if you want to highlight my Blog link, you'd need to hit 58 tabs to get there.

Text only mode? Heh, that's actually OK:

Curious as to what all of the possible icons and options mean, as well as a glossary of potential accessibility issues? WAVE's got you covered:

I realize for many of you out there, this may be of very peripheral interest, but these past few months have opened my eyes as to some of the challenges we face when we try to make software accessible to as many users as possible. A lot of the site design prevalent today is very difficult to navigate by using alternative means. If you are not willing, or able, to take a plunge into the world of screen readers and speech recognition directly, but you are curious to see how your site stacks up against some accessibility standards, get WAVE and give it a try. You will learn a lot about your site(s), in ways you never imagined.