Four Web Accessibility Testing Tools/Practices to Start Using Today

I recently ran some quick tests to see how accessible a website was. To do this, I used four different techniques which can test for different types of issues.

1.WAVE Accessibility Tool

The WAVE extension can be used in Chrome or Firefox. After installing it, navigate to the site you want to test and click the icon. The tool will then show an overview of the results with a tab to drill further down into the details. The page will be annotated with icons that show where each problem is, and the underlying source code will also show where the issues are.

This tool will pick up issues such as missing alternative text, empty buttons, incorrect link text, and contrast issues. It also has many checks for compliance issues found in the Section 508 and WCAG 2.0 guidelines.

If the tool does not show any errors, this does not mean the site is accessible. While the tool can provide a quick and easy overview of any issues the site may have, you still need a human to test it out.

2. Screen Reader

If you are using a Mac, enable the VoiceOver screen reader to test how a screen reader will deal with the page. (If you’re testing in your office, don’t forget to put on your headphones!) Do all the controls and items have sensible names when read aloud, or do you hear a lot of “image456.png” and “checkbox, unchecked checkbox”?  Does the close button on a dialog say “close,” or is it read out as “X” or “times”?

(If you are using Windows, you can use a screen reader like Narrator.)

3. Keyboard Navigation

Some users are unable to use a mouse or trackpad, so try navigating through your site using only the keyboard. Is the path logical? Is there a way to skip a large number of controls to get to the main items? Are parts of the website (e.g. popups) impossible to reach? Are some controls and/or links skipped?

4. Zoom/Large Text

Zoom your page to 150%. Set the font size in the browser to a large size. Is the page still legible and usable, or are the text and controls overlapping and obscuring the page?

Summary

These four techniques can quickly alert you to any accessibility issues. They are not, however, a replacement for testing with real users (for example, people who use screen readers or have other types of disabilities). These personal interactions will offer a real understanding of how people experience your website.

There’s one more point about planning for accessibility. If you are serious about making your site accessible, testing and fixing at the end of a project is usually too late. Accessibility should be thought of and designed in right from the start.