Accessibility testing on a $7 budget
For less than the price of two lattes, you can set yourself up with a testing lab that will allow you to fix most issues before they get you in trouble.
In my job managing accessibility testing for a handful of major cruise lines, we make extensive use of enterprise-grade testing tools that catch the low-hanging fruit of accessibility violations. These applications are great for analyzing a large volume of pages and for tracking progress over time.
For a small- or medium-sized business, however, just being able to spot-check your key pages or templates is enough to get a good sense of your work’s compliance. Here are a few of our favorite tools and techniques that are free or nearly free.
Tricking out your browser
WAVE
WebAIM’s free web accessibility evaluation tool can be installed as an extension to Firefox or Chrome (download). Once installed, WAVE will test your markup against most WCAG 2.x guidelines and provide you with a user-friendly summary of errors, warnings, and other important features. You can click on a detailed list and link from there to the line in your source code or reference the WCAG guideline that affects it.
aXe
While WAVE may appeal to non-technical designers and project managers, aXe is geared specifically to coders and front-end developers. aXe works as an extra tab in Chrome Developer tools and provides in-depth detail on accessibility errors. It’s particularly useful if you’re working front-end JavaScript frameworks like React, because you’re testing against a snapshot of the Document Object Model (DOM) that instant, as opposed to just viewing the page when it loads.
Checking color contrast
Contrast ratio website
There are a few contrast checkers out there, but one of my favorites is the Contrast Ratio checker by Lea Verou. You take hex values from your style sheets and plug them into the background and text color values on the page. It also supports RGBA and HSLA color models, so you can see if your text can be read over a translucent color background.
Contrast app
If you’re more of a point-and-click kind of user, Contrast is a great Mac utility available from the Apple Store for $6.99. It works like Photoshop’s eyedropper tool, so you don’t have to copy and paste any hex values. In fact, it works with Photoshop, Sketch or any other app you might have visible on your desktop. Sure, it’s not free, but Contrast will pay for itself within an hour or two of sampling colors on your design files.
Chrome Developer Tools
As of release 65, Google Chrome’s Developer Tools now have a color contrast debugger built into it. It’s a little hard to find, but it will check the contrast between a text color and the background color it thinks you have behind it. Click on a CSS color attribute in your Styles tab, and a color picker will pop up. Click Show More, and the popup will expand to show you the contrast ratios and a white line of where the contrast boundaries lie.
The tool is great for simple layouts without a ton of layering, but not recommended for javascript frameworks where the background color is set dynamically.
Other tests you can run manually for free
This is a series of simple tests that will catch most issues that can keep people with disabilities from performing core tasks on an app or web site:
- TEST 1: Unplug your mouse and turn off your trackpad to test site navigation without a pointing device. Every menu item and every control should be accessible without a mouse or trackpad. You should also be able to see which element has focus on it at all times.
- TEST 2: Magnify the page to 200%, then to 500%.
* Does the page still make sense?
* Are all of the controls on the page, or are some hidden off-screen?
* Are the controls usable at this size? - TEST 3: Turn on high-contrast mode to make sure that your site’s graphics are visible. You may spot some weirdness with 8-bit PNG files or with other transparent graphics that may require graphic fixes.
NOTE: If you have WAVE plugin installed, you can simply click Contrast at the top of the WAVE sidebar. - TEST 4: Turn off images to test usability and integrity of content:
* Does the site’s content make sense?
* Does the content become harder to understand without graphics?
* Is any content missing?
* Do any important controls disappear? - TEST 5: Click on field labels: if form elements are properly labeled, then focus will go on the form element if you click on its label. If not, the form field will not get focus.
- TEST 6: Turn off CSS (style sheets): If you have WAVE plugin installed, you can simply click No Styles at the top of the WAVE sidebar.
* Does the lack of background images make any controls or important content disappear?
* Can you understand error messages and other previously visual cues?
* Is content still being displayed properly in an easy-to-understand order?
* Does any color or type styling remain? This should be a red flag for inline style definitions, which are to be avoided. - TEST 7: Check for captions and transcripts if there is video, audio, or other media on the site.
Set up a list of core tasks
For testing purposes, it’s best to have a clear-cut list of the core tasks that your users will perform on your site. In an e-commerce site for example, this list would include: browsing the catalog, selecting products, setting up an account, adding a shipping address, and making a payment.
Once you’ve determined your core tasks, you can then check your work to see if it can be used by the following people:
- persons with mobility issues who are unable to use a pointing device
- users with low vision
- blind users who rely on screen readers to navigate
If everyone in your audience can perform every core task, awesome, you’re done! Otherwise, remember this:
Your work is not accessible enough if any users with any disabilities are unable to perform any core task.
