Sharing is Caring on Global Accessibility Awareness Day
Share
Last year around this time, to mark Global Accessibility Awareness Day, which takes place every year on the 3rd Thursday of May, we shared our list of favorite resources and tools that help us test and address the web accessibility issues that invariably crop up when we’re auditing, designing, and developing websites. We’ve updated the list this year with a number of great new tools and resources that we’ve come across in the last year. Our hope then, as now, is that you’ll take advantage of these great resources to make your websites as accessible as possible.
If you know of any other tools or resources that we should add to the list, please let us know what we’re missing and we’ll make sure to update this post to include them.
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.
WCAG 2.0 Checklists
While the following lists aren’t updated with the latest recommended guidelines, they’re still useful so we’ve included them again this year.
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 from the list.
Heydon Inclusive Web Design Checklist – GitHub project that aims to be the world’s biggest checklist for inclusive design considerations.
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.
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.
Tools
All the tools listed below are free unless otherwise noted.
Automated Testing Tools
Bookmarklets
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
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.
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.
PDFs and Documents
PAVE – This free online tool can validate and fix the accessibility of PDF files.
Accessibil-IT – A paid service that allows you to upload PDF files for assessment and fixes.
Color & Contrast
Color Contrast
Ensure that the colors 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 color values in a variety of formats (hexadecimal, RGB, HSLA, etc.) and easily swap background and foreground colors.
Color Contrast Analyzer – App for Windows & Mac that uses an eyedropper and doesn't require knowing the hexadecimal color codes. Can also be used with Word and PDF documents.
Color Safe – Create an accessible color palette.
WebAIM Color Contrast Checker – Determine the accessibility of the text on your pages.
Invert Page Colors – A Chrome plugin that does what it says by inverting all colors on a page.
Color Blindness
See your site through the eyes of colorblind people:
Color Oracle – A free color blindness simulator for Window, 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.
Other Online Resources:
W3C’s official page on Accessibility
User Agent Accessibility Guidelines (UAAG)
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.
Meetups and Events
The following list is by no means exhaustive, so please let us know if there is a meetup or event in your area and we’ll make sure to add it.
Meetup Groups
Bay Area Accessibility Dinners
Bay Area Accessibility and Inclusive Design
Events
CSUN Assistive Technology Conference
Crispin Bailey
When website requirements get daunting, Crispin loves to roll up his sleeves and dig in. His overarching goal is to deliver beautiful and accessible websites for our clients and their audiences. As a seasoned digital strategy expert, Crispin oversees Kalamuna’s design and strategy practice, coordinating design and technical efforts throughout the discovery and design phases on projects to build bridges between research, design, and development.
