Accessibility (a11y)

Improving accessibility, by example

Quick Start

Install Node, then run the following on the command line:

npm install
npm start

The commands above will install necessary dependencies, then start the app on your machine.

The master branch contains an app with bad accessibility. Checkout the fixed branch to try the app with improved accessibility. Use the screen readers below to see the huge difference.

Slides

Slides from "Building Accessible Web Apps"

A11y Tools

• Chrome Audits tab (powered by Lighthouse)
• Axe accessibility checker Chrome extension
• Axe Core CLI Axe CLI - Useful for CI.
• Wave accessibility evaluation tool for Chrome
• Siteimprove
• ChromeLens
• Color contrast checker
• Testing Library - Encourages writing accessible apps by writing tests that mimic how user's interact.
• ESLint A11y plugin
• Pa11y - Run a11y checks on your CI server

Screen Readers

• NVDA - Free for Windows Vid on usage
• VoiceOver - Built into Macs
• ChromeVox for Chrome
• Jaws

Resources

• Learn HTML including new stuff in HTML5
• Web Content Accessibility Guidelines
• WebAIM Checklist - A distilled version of WCAG guidelines
• 18f accessibility guide
• A11yCasts on YouTube
• Free Udacity Web Accessibility Course by Google
• Aria Spec on W3
• Aria Authoring Practices Spec
• Accessibility Fundamentals from Google
• In Browser ChromeVox Demo
• Aria Roles
• Frontend Handbook
• Frontend Checklist
• Marcy Sutton's Blog on Accessibility
• Accessibility in React Apps

Training

I offer on-site training and consulting on JavaScript and React at reactjsconsulting.com.

Chromevox Cheatsheet

Chromevox docs

• Chromevox = Ctrl+cmd on Mac
• Chromvox + . = Show all commands and search box
• Navigate elements: Ctrl+cmd+arrows

Announce table cell header:

• Cmd+ctrl+backslash while reading table cell to enter table mode.
• Cmd+ctrl+T+H to announce current cell's headers.