Skip navigation
Tyssen Design — Brisbane Freelance Web Developer
(07) 3300 3303

Tools for checking website accessibility

By John Faulds /

Following on from my last post in which I mentioned screenreaders (or alternatives) that people might like to try for checking their own sites' accessibilty, and an earlier post in which I listed the extensions I use for web development with Firefox, I thought I'd also list the different tools I use for testing website accessibility.

Some of the accessibility-related Firefox extensions I use – Fangs, Total Validator and TAW3 – are already mentioned in the previous post, but there's a couple of others that I've added since I wrote that article:

  • Mozilla Accessibility Extension

    Created by the Illinois Center for Information Technology Accessibility, this extension is designed to make viewing web content easier for people with disabilities, but also provides a range of useful tools for web developers.

    There is some cross-over of features between this and the Web Developer extension, but with this extension you also have options for various ways to navigate a page including links, titles, heading, forms and accesskeys; a list of text equivalents and the ability to turn images on and off; the ability to disable scripts or certain script events; a couple of high contrast stylesheet options (similar to that offered by Opera); links to W3C validators and online accessibilty checking tools like FAE, WebAim, Cynthia Says, WebXact and TAW (although it would be good if the URL of the site you're currently checking could be automatically added to the entry field of each of these sites) and keyboard enhancement tools.

    Apart from the validator links, web developers would benefit from this extension by trying out the different options and checking how their pages behave under different conditions.

  • Colour Contrast Analyser

    Gez Lemon of Juicy Studio has written a very useful extension which will examine the colour contrast of every element on a page and tell you whether it passes the tests for luminosity contrast ratio, and colour difference and brightness difference according to the algorithm suggested in the W3C's working draft for Accessibility Evaluation and Repair Tools (AERT).

There is also a standalone Colour Contrast Analyser tool (which was recently updated to version 2 to comply with suggestions made by the WAI WCAG 2.0 working group) which does the same thing but you have to manually select your elements.

The same people who develop the Colour Contrast Analyser have also created the Web Accessibility Toolbar (WAT) for both Internet Explorer and Opera. If you already have the Web Developer and Mozilla Accessibility extensions for Firefox (and you use it as your main browser), there's little need to use the WAT as most of the features are common to both, but it is useful if you develop only in one of those two browsers and also for easily disabling javascript in IE.

Aside from these browser extensions, I also use the following tools/programs:

  • aDesigner

    The aDesigner is a disability simulator that helps test the accessibility and usability of web pages for low-vision and blind people. You can 'visualise' your pages as either a blind person or one with low vision would see them and gives you scores and reports as to their compliance with WCAG 1.0 guidelines, listenability and navigability. Under low vision settings you can choose between protan, deutan and tritan colour deficiency and the 'Problem Map' helps you locate quickly the parts of your page that need attention.

  • WebbIE

    WebbIE is specifically designed as a web browser for blind and visually-impaired people, especially those using screen readers, but it is also very useful for web developers, because it forces you to interact with your pages the same way a person with impaired vision would, in other words, in linearised text-only mode. Doing this will give you the real-world look at how a blind person might experience your site that online checking services can't (although you can still cheat and put the pages back into visual browser-mode (using IE) if you want to.

It may seem like checking for accessibility is just adding more things to the already lengthy list of things you need to remember to take into consideration when developing web pages, but after a while, the practices will become second nature much like learning the differences in rendering HTML and CSS between browsers.