Spread the love on Global Accessibility Awareness Day

By Crispin Bailey,
Image of lush garden with path cleared.

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

Techniques for WCAG 2.0

User Agent Accessibility Guidelines (UAAG)

Section 508

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

#a11yTO Meetup Group

Events

Accessibility Camp Bay Area

#a11yTO Camp

#a11yTOConf

Crispin Bailey

Director of User Experience

When website requirements get daunting, Kalamuna dispatches Commander Crispin Bailey to lead the charge. His inviolable mission: to secure air-tight, accessible online victories for our clients and their audiences. As a seasoned digital strategy expert, Crispin masterfully and gracefully coordinates the savvy Kalamuna design and technical forces to ultimate triumph.