Spread the love on Global Accessibility Awareness Day
Share
At Kalamuna, we believe that everyone, regardless of ability, has a fundamental right to access the information and tools on the Web. Our job, as a digital agency for numerous institutions and organizations trying to make the world a fair and equitable place, is to ensure that the websites and products we design and build for our clients are accessible.
But making that content accessible is not always easy or straightforward. Over the years, we’ve learned that there are no silver bullets. To mark Global Accessibility Awareness Day, which takes place every year on May 17th, we wanted to share our list of resources and tools that help us test and address the issues that invariably crop up. Our hope is that you will use these 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 update this post.
WCAG 2.0 Checklists
The WCAG 2.0 Guidelines Level A and AA comprise more than 50 success criteria. Maintaining a checklist of satisfied criteria will help you manage your accessibility review process. The lists include short descriptions of each success criteria and several include links to reference documentation.
The A11Y Project's Web Accessibility Checklist – A beginner’s guide to accessibility.
McMaster University Web Page Checklist – Interactive checklist for WCAG 2.0 Level AA.
WebAIM WCAG 2.0 Checklist – HTML and PDF checklists.
W3C WCAG 2.0 Checklist – HTML checklist.
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.
VoiceOver – Screen-reading technology integrated into the Mac OS X operating system.
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.
Browser extensions
Web Developer Toolbar – Extension for Firefox and Chrome with tools that make manual accessibility testing easier.
aXe Browser Extension – Deque’s open source accessibility extension is available for Firefox and Chrome, and also as an API that you can integrate directly into your code deployment process.
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 and interfaces through the eyes of extreme users with different abilities and disabilities.
Siteimprove Chrome Plugin – A chrome plugin that you can use for free to scan pages one at time using the Siteimprove automated testing service.
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.
PDFs and Documents
PAVE – This free online tool can validate and fix the accessibility of PDF files.
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.
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.
Other Online Resources:
W3C’s official page on Accessibility
User Agent Accessibility Guidelines (UAAG)
Resources for Mobile Accessibility Guidelines
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
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.
