Notes: Building for Accessibility on the Web

The spec is overwhelming!

• WCAG 2.1 Quick Reference (Haha, quick.)

The web is made of HTML

• On the browser accessibility tree
• On system accessibility APIs
• Demo: HTML semantics

But HTML is too limited!

• Is it though?
• The ARIA spec
• ARIA roles cheatsheet
• Demo: Messing with ARIA roles
• Demo: aria-live
• Demo: Losing focus and Demo: managed focus
• Demo: zooming in

Tools

• NVDA screen reader for Windows.
• Chrome: High Contrast.
• Chrome: No Coffee.
• Chrome: audit and accessibility inspector.
• Firefox: Dark Reader.
• Firefox: Accessibility Inspector.

Other Resources

• VoiceOver keyboard shortcuts.
• NVDA keyboard shortcuts.
• The A11y Project: how-tos, patterns and checklist.
• Inclusive Design 24: 24 hours of talks on inclusive design.
• Inclusive Components

React-specific Resources

• React docs on accessibility.
• Reakit toolkit.
• JSX accessibility plugin for eslint.