Free Tools for Testing Website Accessibility
You don’t have to be an expert web designer to make your site accessible to users with disabilities. There are plenty of tools and resources to guide you through an inclusive web design process.
Accessibility consultant David Berman presented some of these in the webinar 11½ Free Tools for Testing Website Accessibility. You can watch a full recording of the webinar below, or read on for an overview of his recommended testing tools.
CynthiaSays from HiSoftware
HiSoftware is a company that produced an enterprise-level accessibility testing product called Compliance Sheriff. It’s one of the most comprehensive, robust testing products on the market, but it’s also very expensive.
HiSoftware released a free counterpart called CynthiaSays which scans your website for a specified level of WCAG compliance. The scan takes a few minutes, then it delivers a wealth of information about which WCAG rules have been broken, where, and what specific techniques are recommended for fixing it. The instances are marked with icons like a red X for violation, a green checkmark for proper coding, and an eye for something that requires a human to check it.
This works great for public-facing websites that don’t require credentials to view.
WorldSpace Single Page Analysis from Deque
Deque (pronounced ‘dee-KYOO’) is a competitor to HiSoftware. Their free testing tool is called WorldSpace Single Page Analysis, which is comparable to CynthiaSays. The main differentiator is an optional Firefox plugin, FireEyes, which helps a design team manage remediation steps.
Like CynthiaSays and Worldspace, the Tenon Tester is a single-page analyzer for accessibility issues. What makes Tenon exceptional is the intuitive UI of the results page, which displays graphs and specific lines of code that need updating and how (see screenshot of an example, examining VW’s webpage).
The WAVE Toolbar is a free plugin for Firefox or Chrome. This lets you examine a site’s accessibility as you browse the web.
Its four main features are:
Errors, Features, and Alerts
If you run this test, it will display icons throughout the site for definite failures (red), possible failures (yellow), and compliant design (green). When you hover your mouse over an icon, a pop-up box will explain the issue.
This displays the order of all objects on a page. You could tab through a page this way or have a screen reader read it all out aloud to you to make sure it makes sense.
This displays a text-only version of a website. This is how a screen reader navigates a page, so if this is poorly organized or missing information, you can discover that easily.
This feature displays the semantic structure of a website so you can see at a glance if the headings are ordered correctly, e.g., only one H1, all sub-headings are properly tagged and nested, etc.
Karl Groves’ Diagnostic.css
Diagnostic.css is another free plugin that adds an accessibility toolbar to Chrome.
Like the WAVE toolbar, it displays color-coded alerts directly on the page elements that need attention. It was developed and posted on GitHub by Karl Groves, an accessible web developer and consultant.
AChecker can analyze code that isn’t live on the web yet. You simply copy/paste your code into AChecker and it will detect accessibility issues in the HTML. You can also input a URL if the page is live.
One perk of using AChecker: for the items that require human review, you can mark them okay or not okay, and AChecker will remember that feedback the next time it checks your page so it doesn’t bug you about the same false alarms.
HTML_Codesniffer is another free code-analysis tool like AChecker. It has a gorgeous interface that makes the process simple and elegant.
Accessibility Developer Tools
This is a Chrome extension that adds an accessibility audit feature to the inspect element window when viewing code.
Total Validator Pro
Total Validator is a free tool that offers single-page accessibility testing, but for a small fee ($40), the Pro version can scan a whole website. That can save you a lot of time and trouble.
WCAG Color Contrast Analyzer
The WCAG Color Contrast Analyzer is a Windows and MAC-compatible software that lets you compare the contrast between two colors. You can use an eyedropper to pluck the color directly from the site, or type in the hex code for the hue if you know it. It will them display if the color contrast is WCAG 2.0 compliant.
WCAG Contrast Checker
The WCAG Contrast Checker is a free Firefox plugin that lets you check a webpage for color contrast issues. It will display a window sorted in order of contrast, so the failures will cluster at the top for your review. (See image to the right.)
In compliance with a WCAG level A rule, PEAT, or Photosensitive Epilepsy Accessibility Test, is a tool that scans a video to see if it could trigger a seizure for someone with photosensitive epilepsy. It will flag parts of the video that contain flashes or color frequencies that could be dangerous for epileptics.
NVDA, or Non-Visual Desktop Access, is a free, downloadable screenreader that works on Windows. It reads text aloud and provides a handy transcript of what is read. Since NVDA is an open-source platform, there are free plugins you can install to enhance it.
Window-Eyes is free with a full Microsoft Office suite. It’s one of only two screen readers that can adequately test Flash applications (the other one being JAWS, an expensive but robust screen reader).
Fangs is a free Firefox plugin that emulates screen readers for sighted developers, or as David calls it, “my favorite screen reader for people who can see.” Fangs provides a headings list and a link list, along with the full text of what a screen reader would read on your site.
The links list takes hyperlinked text out of context so you can see at a glance if the links have descriptive anchor text or not.
For more inclusive design testing tools and tips, check out:More: a11y, accessibility checker, accessibility expert, accessibility testing, accessible design, AChecker, closed captioning, closed captions, color contrast, contrast checker, CynthiaSays, david berman, Deque, Diagnostic.css, digital inclusion, disability discrimination law, ed tech, Fangs, free tools, HTML_Codesniffer, inclusive design, instructional design, Karl Groves, Non-Visual Desktop Access, NVDA, Online Video, PEAT, Photosensitive Epilepsy Accessibility Test, Tenon tester, Total Validator Pro, universal design, video accessibility, video captioning, WAVE, WCAG, web accessibility, web design, webinar, whitepaper, Window-Eyes, Worldspace