A couple weeks ago I had an opportunity to present at the Michigan Association for Disability and Higher Education (MI-AHEAD) conference with my colleagues Nate Evans, Phil Deaton and James Jackson. We spoke about the great work Michigan State University is doing to promote accessible content in electronic information technologies (EIT), in particular our strategies around bringing awareness of accessibility into people’s workflow.
During a side conversation we were having I pulled up a website I’ve been working so they could weigh in on a question of color contrast. As we worked I realized that outlining some of the free tools I use on a daily basis for assessing website accessibility might be useful to others as well.
There are four tools I use regularly in my workflow. Below I’ve listed each with a brief description of how and why I use them. I use the browser-based tools with Google Chrome, but many of them work with other browsers too. One last note is that none of these tools are complete solutions in themselves and automated tools always need a human to confirm, but they are great tools to aid you in your work.
The Tools
HTML Code Sniffer
HTML Code Sniffer is the tool I use most often as it gives me a quick overview of how inaccessible a page likely is. It sits as a bookmarklet in my browser and at the click of a mouse will analyze any page I have up for Section 508 or WCAG2.0 A, AA, and AAA. The tool returns known errors, warnings and notices complete with a description of it, links to the W3C website, and a snippet of the code it’s looking at.
Tota11y
Tota11y is another bookmarklet based tool that helps to confirm things Code Sniffer has found and to identify other issues. Particularly useful are its ability to identify possible contrast issues, lay out the heading structure, and identify ARIA landmarks. It also has a feature called Screen Reader Wand that seems to be a reasonably good emulator for what a screen reader would see. Tota11y will report errors it finds as well, but lacks some of the details Code Sniffer provides.
Web Developer Tool Bar
I have long used the web developer tool bar in developing websites, but have recently found it to be very useful for helping see what a page looks like when you strip out all formatting and styles. I usually use it to turn off all styles and also hide images and background images but leave alt text on. This gives me a relatively good overview of what a page might look like on the front end to a screen reader or search engine.
Colour Contrast Analyser and WebAIM Color Contrast Checker
OK, this is two tools, but they both have uses that I find complement one another. First is the Colour Contrast Analyser from the Paciello Group and the second is WebAIM’s Color Contrast Checker. The first requires a download but is worth it for the ability to use droppers to select colors (easy to find the exact color you want). It will immediately tell you whether your colors pass at AA and AAA levels and gives the hex code for color. If my contrast is not passing, I take the hex code over to the WebAIM tool and use their lighten/darken feature to find a color that is closest to the one that is causing the failure. There are many times this has allowed us to maintain a look imagined by the designer while also ensuring the site is accessible.
These tools are certainly not a comprehensive suite, and they do require a reasonable amount of background knowledge (as do all accessibility tools) to use for proper remediation work. However, along with a few other tools they form a solid base from which to work.
What tools and techniques do you find at the core of your accessibility work?