We use a number of tools to help us design products that meet accessibility standards. These are some of the tools we use to quickly test our software for conformance against common accessibility problems.
Colour Contrast Analyser
The colour contrast analyser from The Paciello Group helps designers determine the contrast of text and other visual elements. This allows us to determine the legibility of these elements, provides a pass/fail assessment against WCAG 2.0 colour contrast criteria and also simulates several visual impairments, including colour blindness and cataracts.
We also use a colour contrast analyser that works as a plugin for sketch, developed by Florian Schulz. This simple tool allows you to quickly check the contrast between two layers and fits neatly into the design process.
Chrome Extension: Accessibility Developer Tools
The Google Chrome: Accessibility Developer Tools is quick and easy to run. It helps check websites at any stage of the development process and ranks issues depending on the severity. Severe issues often signify the incorrect implementation of an HTML element while warnings are areas for improvement to help you achieve the AA and AAA levels. It is useful for checking colour contrast, Aria tags and focusable elements. Each item in the audit has a link referencing to the audit rules which provide precise clarification on the issue:
A11Y command line tool
The A11y command-line tool helps you audit websites using the Chrome Accessibility tools. It catches the same errors as Chrome, but because it is running in the terminal it is possible to build it into build tasks using a task runner (such as Grunt). By checking code during the build process it reduces the effort required during testing and flags up issues early and often. However, the screenshot below is a good example of the limitations of automated testing, showing an error state of a hidden fly-out accessibility menu we developed to allow keyboard users to skip to the main content quickly.
Web Accessibility Evaluation Tool (WAVE)
The Web Accessibility Evaluation Tool (WAVE) is similar to the chrome accessibility tools and command line tools mentioned above but provides a visible list of accessibility features and errors on your page. It is very useful for checking alt text is meaningful, heading levels and skip links. It also checks colour contrast and allows you to view the page with no styling present.
How to Meet WCAG 2.0 quick reference
The WCAG checklist (recently updated) is an online checklist that helps you audit a site against the WCAG guidelines. It is customisable so you can filter out the different levels, technology and whether they are design, development or content related. Against each area is a short description and more detailed description and a selection of techniques for success and failures. This guide is our go-to tool when trying to evaluate the accessibility of our products.
Automated tools do not replace testing or expertise
No automated tool can replace testing. We do two types of UX testing at OCC for accessibility: expert evaluation and user testing. As part of our design and development process software is regularly tested by accessibility champions from design, front-end and testing. This allows us to pick up problems quickly and fix issues before we test with users. We look for conformance with standards and our own knowledge of accessibility issues which are not explicit in the guidelines. Once we have internally tested the software we arrange a series of observed usability testing sessions with users with a variety of accessibility needs. This helps us in our effort to ensure that the work we do at OCC is accessible to all.