Helpful accessibility tools

Matthew Standage

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.

The Colour Contrast Analyser by The Paciello Group
The Colour Contrast Analyser by The Paciello Group

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:

Chrome Accessibility Developer Tools
Chrome Accessibility Developer Tools

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.

A11Y tool in terminal
A11Y tool in terminal

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.

Web Accessibility Evaluation Tool (WAVE)
Web Accessibility Evaluation Tool (WAVE)

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.

  • Ines

    Matthew, I think it’s great that besides the software testing, you pay attention on your usability testing sessions with users, which I’m sure is the most important part of the process! Great work 🙂