adaminfinitum/a11y

Repository on accessibility

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.

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.