Before actually introducing the tools I just need to give a fair warning that those tools are not a replacement for a manual tester. No matter how good automated tools are, still most of the testing is done manually, by a tester who is familiar with accessibility principles and guidelines. So, use the tools below to assist you in your testing, but also keep in mind that you’ll need to check the results of those tools manually, and also will have to evaluate the site by yourself, using your knowledge and experience with web accessibility. One important resource you need to know well is the Web Content Accessibility Guidelines (WCAG) 2.0.
My top 5 tools
- WAVE – This is a popular accessibility evaluation tool. It gives a an intuitive graphic report of all the accessibility issues and features it identifies on a page. It has two versions: an online service, or a downloadable extension for either Chrome or Firefox browsers. I usually use it at an early stage of testing a website to get an general view of the accessibility state.
Once you installed the extension, you just click the wave icon on the browser’s toolbar, and it’ll evaluate the currently open web site. In the following screenshot you can see a sample report. The summary on the left, and there’s a small icon per issue / feature on the page. I used “Accessible University” demo site created by University of Washington to teach about accessibility.
If we look closer at the sidebar, we’ll see that for each issue marked on the page, there’s a detailed explanation. WAVE reports Errors and Warnings as well as the existence of any accessibility related information like landmarks, alt text and ARIA labels.
So this is a quick and easy way to get the general idea about the condition of the site.
- NVDA – A popular screen reader for Windows. Best used with Firefox browser. Generally speaking, using a screen reader during your testing is important, as it best simulates the way blind people will use your site. It helps uncover accessibility errors like missing alternative text, incorrect roles and repeated text.
- WCAG Contrast Checker – This little Firefox extension is helpful in identifying color contrast issues. I like the fact that it gives ALL the color couples it identifies, and lists their contrast rates in order. It’s useful because all these tools fail to calculate contrast where a background image is used, or even if the color has some opacity defined. So this list makes it easier to manually review each couple to validate the correctness of the report. Another useful feature of this tool is the color picker, that allows you to calculate the contrast of the actual colors as seen on screen. And finally there’s also the option to simulate different types of color blindness. While you don’t have to use this to know if the page uses color as the only visual means of conveying information, it might be helpful to see how it looks.
- Accessibility Developer Tools – This Chrome extension is great for accessibility evaluation of the page, like WAVE. The difference is that it works inside the Developer Tools section of the browser, and does not add visual indicators like WAVE. The way to use it as an evaluation tool, is to open Developer Tools (using F12), and go to Audits.
It also has a great contrast checker, that gives suggested colors that meet WCAG2.0 AA & AAA standards.
- Colour Contrast Analyser (CCA) – This is a great tool that can check contrast ratios anywhere. This means it’s useful when working on Digital documents accessibility as well, and not only websites. It has a color picker that you can use for selecting any couple of colors on screen, and it can calculate ratios for different colorblindness as well.
As this list was only of my top favorite tools, many tools for accessibility testing were left out. I plan to write separate posts about some of them. Meanwhile, here’s some information about them, just to give a complete picture of what other tools exist.
- Screen Readers – VoiceOver is the built-in screen reader for Mac devices. JAWS is a popular Windows screen reader. ChromeVox add-on for Chrome, is a light screen reader just inside the browser.
- Accessibility Evaluators – aXe for Firefox or aXe for Chrome.
- Mobile app accessibility evaluator – Accessibility Scanner.
- Vision issues simulator – NoCoffee Chrome extension.
- Text Simplicity – Hemingway editor or WebPageFX Readability tools.
- Automated checks – For creating automated accessibility checks, you can find aXe-core on github.
*I plan to add more information to this post in the future. Sharing it for now, since it already contains a lot of useful information.