Accessibility and Usability – Part 3: Tools

This is part of a series on accessibility and usability. See the contents page for more.

Now that we have talked about Code and Navigation and Design, I’ll talk briefly about a few tools you can use to help you do a mini accessibility study on your website, and briefly point to some resources on doing more complete usability studies.

Web Developer Toolbar

The Web Developer Toolbar add on for Firefox is what I use most often to do a down and dirty accessibility check of webpages. You can download the Web Developer Toolbar from its page at Firefox.

You can use the web developer toolbar in many ways (in fact, I still find more uses for it!) but for the purposes of this discussion I’ll just go over a few simple tests.

You can use the web developer toolbar to disable images, CSS and Javascript on your pages. Doing this will give you a pretty good idea of how accessible your page is – if you can do this and still navigate around and get to content, you are in pretty good shape.

Sometimes the toolbar shows some pretty dramatic problems. Take the following site:

Buy Fresh, Buy Local

The site looks pretty – but when you turn off javascript by choosing Disable > Disable Javascript > All Javascript using the web developer toolbar, you get the following page instead:

Buy Fresh, Buy Local with javascript turned off

Problems are not always that dramatic.

Turning off all javascript (Disable > Disable Javascript > All Javascript) Styles (CSS > Disable Styles > All Styles) and Images (Images > Disable Images > All Images) On aadl.org points to the fact that there is no H1 tag. Inspecting the code with the code inspector turned on (Information > Display Element Information) confirms this.

aadl.org is lacking an H1 tag.

Finally, the Web Developer Toolbar contains a built in validator for your CSS and HTML (actually, it uses the validator at http://w3.org, but offers and easier way to get to it.) You can access the validation tools by navigating to the page you want to check (must be on the web) and choosing Tools > Validate CSS or Tools > Validate HTML.

Firefox Accessibility Extension

One of the more impressive, free tools out there to check your website’s accessibility is called the Firefox Accessibility Extension. With this tool, you can get access to reports on accessibility that will point out missing alt tags, etc. There are 2 high visibility stylesheets that let you see what your site might look like to a low vision user. These can be found under Style > High Contrast View 1 & 2.

There are many more features found in this extension than I can go into here, but you can read the documentation for more.

Greasemonkey, Stylish, and various scripts

Greasemonkey is a Firefox add on that lets you change how a website behaves. Stylish is another firefox add on lets you apply your own stylesheets to websites. Many people with low vision or other special needs use these and other add-ons to alter the look of webpages. It is worth installing these and a few scripts to see how your site looks when altered.

For example, the Readability Interface is a set – a script for greasemonkey, and a style for Stylish – that lets you change the font, font size, background color, and other things about a website so you can see it better.  Likewise, the Night Shift style for Stylish applies a dark gray color scheme to a web page, making it easier to read in the dark.

Usability Tests

Usability tests can range from the simple to the complex (think eye tracking software) but are useful if you can get a group together, no matter how small. In a library setting, you could ask for a few volunteers to come look at your website in various stages of the design. Ask them to complete some tasks, and then observe how easy or hard it is. Encourage them to vocalize their thoughts. Don’t interrupt them or try to direct them, just observe. Afterward, compile what seemed to trip the users up, and fix them for the next iteration. If this seems very simple, that’s because it is. Although usability testing can be very complex and expensive, it can also be cheap and easy.

In addition, there are online tools you can use for usability testing. This article lists many of them. (Thanks to commenter Bret Clement)

Keep in mind that while a usability test may be fairly easy, the problems it turns up are not often easy to fix. Also, keep in mind that what is easy for one person might be hard for another, so don’t be too quick to change something based on one user. A usability test should always be combined with an understanding of usability principles.

This quick overview is no way attempts to dismiss usability testing or make it sound overly simple. One could devote an entire book to it (in fact, there are many). However, watching a user actually interact with your website can be an enlightening experience, even if you don’t have the money for a full fledged usability study.

If you’d like to read more on usability, you can start with usability.gov, which is an excellent resource. You might also want to check out the wikipedia article on usability or Usability Testing Demystified, an article by Dana Chisnell.

Conclusion

It is rare to find a website that follows all the rules for accessibility and usability. If you find your website breaks many of the rules set out here, don’t worry. In fact when I started to run tests on my own site, I’m sorry to say I failed many of the tests.  Usability, especially, is more an art than a science, and incremental changes over time can make a big difference to a website. Just be aware, keep at it, and code carefully!