Tools to Test and Resolve Web Accessibility Issues
08/12/20
With the belief that the internet should be for everyone, Crispin Bailey RGD and the team at Kalamuna created an extensive list of tools and resources to test and address web accessibility issues.
Web Accessibility Guidelines & Checklists
What is WCAG?
Though Section 508 compliance set the standard for web accessibility for many years, the Web Content Accessibility Guidelines (WCAG) took its place as the gold standard of web accessibility. Rather than being based in US law, an international consortium created and maintains these standards.
Current Guidelines: WCAG 2.1 Checklists
The WCAG 2.1 Guidelines which were officially “recommended” by the W3C last year, comprise more than 100 success criteria. Maintaining a checklist of satisfied criteria will help you manage your accessibility review process. These lists include short descriptions of the success criteria and several include links to reference documentation.
The A11Y Project's Web Accessibility Checklist – A beginner’s guide to accessibility, kept up-to-date by the A11Y Project on GitHub.
WebAIM WCAG 2.1 Checklist – HTML and PDF checklists.
Previous Guidelines: WCAG 2.0 Checklists
While the following checklists aren’t updated with the latest recommended guidelines, they’re still useful so we’ve included them.
W3C WCAG 2.0 Checklist – HTML checklist.
McMaster University Web Page Checklist – Interactive checklist for WCAG 2.0 Level AA.
Wuhcag Checklists by Level – HTML checklist.
Paul J Adam's WCAG 2.0 checklist – Interactive checklist with option to remove AAA checks.
Heydon Inclusive Web Design Checklist – GitHub project that aims to be the world’s biggest checklist for inclusive design considerations.
Testing for Web Accessibility
While we wish a magic singular tool existed to provide a definitive accessibility evaluation, a truly comprehensive accessibility audit involves testing with a variety of tools. Note that all the tools we recommend are free to use, unless otherwise noted.
Assistive Technology
Assistive Technology (AT), is a broad term for hardware and software that supports people with disabilities. One of the best ways to ensure your website works for everyone, regardless of ability, is to try using it with one or more types of AT. People without disabilities are often introduced to the world of AT through screen readers. Using a screen reader will help you understand how your website’s information is conveyed to blind or low vision users.
Assistive Technology Checklists and Reference Sheets – Provides guides for testing with screen readers in general and using NVDA specifically.
Screen readers
Screen readers are an assistive technology that read on-screen text in a computerized voice. They enable users to control what is read aloud by moving the cursor to the relevant area of text with a mouse or keyboard arrows, or in the case of mobile devices with their finger.
NVDA (Non Visual Display Access) – Windows-only open source screen reader that is free to download and use.
Silktide Toolbar – A free and easy-to-use screen reader simulator that works as a Chrome plugin (so you can use it on a Mac.)
VoiceOver – Screen-reading technology integrated into the Mac OS X operating system.
JAWS – The most popular licensed screen reader, and the one that’s been around the longest. Windows only and requires purchase.
JAWS Inspect – Not a screen reader per se, but a tool that generates text transcripts of what JAWS sees, without running JAWS. Useful for developers.
Automated Testing Tools
Bookmarklets
Bookmarklets are bookmarks for your web browser that add new features.
HTML CodeSniffer – JS bookmarklet that works with all browsers. Provides clear results with links to appropriate WCAG 2.0 documentation and suggested fixes.
tota11y Accessibility Visualization Toolkit – Overlays indicators on your page where improvements are needed, along with explanations.
A11y-outline – Simple bookmarklet to see a page’s landmarks and semantic structure.
Visual ARIA – Javascript bookmarklet that allows you to observe ARIA usage within web pages via CSS, including ARIA 1.1 structural, live region, and widget roles, proper nesting and focus management, plus requisite and optional supporting attributes. Also available as a Chrome browser plugin (see below)
Browser extensions
Browser extensions are small software modules that allow you to customize your web browser.
aXe Browser Extension – Deque’s open source accessibility extension is available for Firefox and Chrome. New this year, they’ve developed a native Android app, and there’s an iOS version coming soon.
WAVE Chrome Extension – In addition to flagging errors and alerts, it also provides nifty tools like "Text only" and "Outline" modes.
Accessibility Developer Tools Chrome Extension – Gives you an accessibility audit and allows you to see accessibility properties for any element in the page.
Funkify – Extension for Chrome that helps you experience the web through the eyes of extreme users with different abilities and disabilities. They have both a free version (with a limited set of simulators) and a new premium version that costs $4.99/month.
Siteimprove Chrome Plugin – A chrome plugin that you can use for free to scan pages one at time using the Siteimprove automated testing service.
Accessibility Insights – Developed by Microsoft and built on top of Deque’s aXe technology. There are browser plugins for Chrome and Edge, as well as a desktop version for Windows.
Visual ARIA – The Chrome plugin version of the JS bookmarklet that visually demonstrates ARIA usage on a web page in real-time.
Online Tools
WAVE Web Accessibility Evaluation Tool – Online version of the popular WAVE tool. It checks single HTML pages and returns a detailed report highlighting areas of concern on the page.
Web Accessibility Checker – This tool checks single HTML pages for conformance with accessibility standards.
Siteimprove – This paid service provides a comprehensive suite of tools to ensure your site’s content is both accessible and legible, and offers robust content governance tools and policies to help managers of large sites stay on top of their content.
Tenon.io – Test single pages for free, or subscribe to their API service to integrate it into your functional testing process or as part of your CMS publishing workflow.
Pa11y – A suite of free, open source tools you can run through a command line, set up as a dashboard, integrate into a CI workflow, or use as a web service.
Content Management System (CMS) Tools
CKEditor Accessibility Checker – This Drupal module enables the Accessibility Checker plugin from CKEditor.com directly in your WYSIWYG editor.
Siteimprove for Drupal – This Drupal module allows content editors with a Siteimprove subscription to get in-page access to the Siteimprove platform while editing content in the CMS. Requires a paid subscription to work.
Siteimprove for Wordpress – A Wordpress plugin for Siteimprove subscribers that’s very similar to the Drupal module. Requires a paid subscription to work.
PDF and Document Tools
Identify and fix issues impacting the accessibility of your online documents.
PAVE – This free online tool can validate and fix the accessibility of PDF files.
GrackleDocs - A free tool to make Google Docs accessible, and export as accessible PDFs.
Colour Contrast
Ensure that the colours of text on your site sufficiently contrast with other page elements by using these tools:
Contrast Ratio – A simple tool that allows you to input colour values in a variety of formats (hexadecimal, RGB, HSLA, etc.) and easily swap background and foreground colours.
Color Contrast Analyzer – App for Windows & Mac that uses an eyedropper and doesn't require knowing the hexadecimal colour codes. Can also be used with Word and PDF documents.
Color Safe – Create an accessible colour palette.
WebAIM Color Contrast Checker – Determine the accessibility of the text on your pages.
Pages Colors Invert – A Chrome plugin that does what it says by inverting all colours on a page.
Colour Blindness
See your site through the eyes of someone who is colour blind:
Color Oracle – A free colour blindness simulator for Windows, Mac and Linux.
Sim Daltonism color blindness simulator – Mac only. Provides a floating window you can use like a magnifying glass.
A11y - Color blindness empathy test – This Chrome add-on emulates 8 types of color blindness, plus grayscale, to check the contrast of your website.
Further Reading
Get expert advice for your accessibility questions on the WebAIM Email List. The list’s archives begin in 1999 and are available to search as well.
The University of Minnesota at Duluth’s Web Design References: Accessibility maintains a well-curated list of links to articles about all aspects of web accessibility. Topics include Cognitive Disabilities, Forms, and Testing.
Crispin is a seasoned digital strategy expert and accessibility specialist at Kalamuna, where he coordinates design and content efforts during the discovery design phases of projects, and in key times during implementation, building bridges between research, design, and development. He has been designing websites for over 20 years, and he is a frequent speaker at conferences and camps where he talks about user experience, accessibility, and other web-related topics.
Check out a Guide for Accessible Design by Michael J. Young RGD
Certified and Provisional Members who are interested in contributing content to the RGD website via Resource Lists, Top 5s and more are invited to email Rushika at .