This document provides some background on accessibility and how it fits in with our goals for Calypso.
If you're mainly here to learn what to test for as you write or review PRs, we also have an Accessibility Checklist.
We need Calypso to be accessible to all our users. According to surveys done by WebAIM,
- 97.6% of screen reader users… (2014)
- 99.5% of users with low vision… (2013)
- 100% of users with motor disabilities… (2013)
… use the internet with JavaScript enabled. These users can use Calypso if we make sure it's accessible and works with assistive technology.
For us, accessible means:
- There are text alternatives for non-text content (videos, images, audio, interactive elements like charts).
- Content can be accessed in different ways, from a computer, phone, or assistive technology, without losing meaning.
- All functionality is available using a keyboard.
- Users have enough time to read and react to content.
- Content is clearly outlined and well-labeled, so that users always know where they are and how to find what they want.
- Content is always localized, and the language of the page and sections are clearly labelled.
- We use labels and accessible notifications to let users know about errors and how to correct them.
- We don't cause seizures with animations or flashing notifications.
- We do all this within markup standards and best practices to ensure future compatibility.
— (paraphrased from the WCAG 2.0 Overview)
For a detailed list of requirements, you can go to the WCAG 2.0 customized quickref. There are 3 levels of criteria for each guideline, A (lowest), AA, and AAA (highest). For Calypso, we aim for WCAG 2.0 Level AA (which also includes level A). This is generally an agreed-upon standard for compliance with equal access laws.
Our ESLint rules include some basic accessibility checks using the jsx-a11y plugin.
A collection of resources that will introduce you to the concept of accessibility and some of the standards behind it.
- WebAIM: WebAIM has provided comprehensive web accessibility solutions since 1999, and is one of the leading providers of web accessibility expertise internationally. WebAIM is a non-profit organization within the Center for Persons with Disabilities at Utah State University. The site brings together a huge collection of information about web accessibility. Most of it is up to date and evergreen enough to help you. The organization's blog tackles many modern-day, evolving topics related to web accessibility.
- W3C’s Web Accessibility Initiative: The World Wide Web Consortium's Web Accessibility Initiative provides strategies, guidelines and resources to make the Web accessible to people with disabilities.
- The Six Simplest Accessibility Tests Anyone Can Do: A handful of simple things you can do to think about and implement accessibility with little effort as you work on projects.
- Intro to Cognitive Accessibility
- Presentation: Explorations in the Virtual DOM: How React.js Impacts Accessibility
- Inclusive Design Fundamentals, especially the disability types to learn about how different disabilities affect how people use technology.
- Inclusive Components Project: A growing list of component patterns for things like menus, tooltips, etc. along with information on why to use which ARIA properties.
A set of blogs, written by accessibility consultants and evangelists that go in depth on all things accessibility.
- The Paciello Group Blog: A blog about web accessibility by one of the first accessibility consulting firms.
- Simply Accessible: A blog with in-depth web accessibility tutorials.
- WebAxe: A blog and podcast about web accessibility.
Find tools that will help you bring accessibility into your workflow.
- Accessibility for Designers: An infographic about how designers can help create good, accessible websites.
- The Complete Beginner's Guide to Universal Design: A blog post that describes universal design, a set of considerations made to ensure that a product, service, and/or environment is usable by everyone, to the greatest extent possible, without the need for adaptation or specialized design.
- Colllor and 0to255: Both are tools that will generate different shades, tints and tones of colors, helpful when creating an accessible color palette.
- Color Palette Evaluator by NC State: Evaluate the contrast of different color palettes with the Color Palette Evaluator by NC State.
- Tanaguru Contrast-Finder: Find high contrast colors when you need them.
- aXe: A browser add-on for evaluating the accessibility of web pages within the developer console.
- Wave: A web tool and browser add-on for evaluating the accessibility of web pages.
- NVDA: A screenreader for Windows (open source).
- JAWS: The most popular screenreader. Available for Windows; costs money.
- VoiceOver: Built-in screenreader for Mac.
- VoiceOver for iOS: Built-in screenreader for iOS.
- Chrome Vox: A screenreader for ChromeOS.
- WCAG 2.0 Cheat Sheet A simplified look at WCAG 2.0.
- An Alt Text Decision Tree: A decision tree for deciding when and how to implement alt text in your work on the web. This is a work in progress by the editors of the HTML5 spec, but it's extremely useful in its current form.
As we work to make Calypso more accessible, we'll probably add more things here.
- accessible-focus: A small module which is run at client startup and adds an
accessible-focusclass to the document's html element when keyboard navigation is detected, so that obvious focus styles can be added without being distracting for non-keyboard users. - ScreenReaderText: A component that adds text which is invisible on normal displays, but "visible" to screen readers.