Blend Accessibility Guide

Last updated: April 2021

Accessibility covers a lot of territory, and affects all stages of website creation. This guide mirrors the structure of the WCAG documentation, but is also broken down by phase of development. As a result, each page serves as a checklist of requirements for that phase, and offers some tips and best practices for accomplishing them.

Note: This guide does not provide any sort of legal compliance.

Be sure to refer to the full WCAG specification to clarify compliance requirements. The section numbering will help you find the right section over on the WCAG site.

What does success look like?

Better websites for humans. Accessibility is a broad spectrum. Some problems will stop people in their tracks. Other things are more subjective features. The goal is to put a good base process in place so we know we’ve covered the high value pieces, and can focus on the nice-to-haves that make sense for a specific project.

Level and Priority Ratings

WCAG Levels:

Unmarked item: WCAG level A guideline.
Level AA: Marks a WCAG level AA guideline.
Level AAA: Level AAA guidelines are not currently included, except in cases of editorial decisions.

Priority Flags:

Unmarked item: Lowest priority but a valuable way to improve the browsing experience.
Important: Marks an issue that makes browsing a site challenging or needlessly tedious.
Critical: Marks an issue that could make it impossible to browse a site successfully.

Priority List - This a a consolidated list of priority items.

Note - All the items listed are part of the WCAG specification. The priority flags are intended to help guage the level of impact a change will have when prioritizing fixes.

Reference Links

WCAG Reference:

WCAG 2.1 - An update to the 2.0 standard has been released.

Official WCAG Checklist - This is the short version from the source of all the madness

WebAIM Checklist - simplified interpretation of the full spec

Wucag Checklist - An even looser, but very readable interpretation

ARIA Reference:

Guide to WAI-ARIA 1.1 Implementation

Section 508 Reference:

Revised 508 Standards Refresh Toolkit

Comparison Table of WCAG 2.0 to Existing 508 Standards

Baseline tests for 508 compliance (PDF).

U.S. Web Design Standards – Includes sample UI components

Section 508 and WCAG are not identical. However, the revised Section 508 standards roughly align with WCAG Level AA.

General Accessibility Reference:

The A11Y Project - A community-driven effort to make web accessibility easier.

18F Accessibility Checklist - Good reference to understand prioritization of accessibility.

Deque University - Training and resources for accessibility.

Access & Use - Videos of people with various disabilities using websites with assistive technologies.

Browser extensions and tools:

Tota11y - Useful for in-browser testing of various accessibility benchmarks.

WAVE for Chrome - extension to evaluate accessibility.

WAVE for Firefox - extension to evaluate accessibility.

Validity - Chrome extension to validate HTML on the current page.

Accessibility Developer Tools - Chrome extension that unlocks an accessibility audit in the inspector.

NoCoffee vison simulator - Chrome extension that simulates color blindness and other vision impairments.

High Contrast - Chrome extension that changes the color scheme of any site to improve legibility. Good for testing.

Screen readers:

JAWS - Apparently, this is the most widely used screen reader.

NVDA - Another major screen reader.

ZoomText - A screen magnification tool with screen reader, and a fast growing user base. These guys also make the Window-Eyes screen reader.

Mac Voice Over - This is the screen reader built into MacOS and iOS. command + F5 turns it on.

ChromeVox - Chrome Extension that is Google's screen reader for Chrome.

TalkBack – The Google screen reader included on Android devices.