Improving accessibility, by example
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 from "Building Accessible Web Apps"
- 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
- NVDA - Free for Windows Vid on usage
- VoiceOver - Built into Macs
- ChromeVox for Chrome
- Jaws
- 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
I offer on-site training and consulting on JavaScript and React at reactjsconsulting.com.
- Chromevox =
Ctrl+cmdon Mac - Chromvox + . = Show all commands and search box
- Navigate elements:
Ctrl+cmd+arrows
Announce table cell header:
Cmd+ctrl+backslashwhile reading table cell to enter table mode.Cmd+ctrl+T+Hto announce current cell's headers.