Inclusive React: A Survival Guide
summary
Concrete fixes and tools for making React apps usable appear fast practical and testable Examples include restoring focus outlines instead of removing them swapping spans for HTML labels adding accessible text or ARIA to icon buttons avoiding divs as buttons giving anchors real hrefs and improving contrast The workflow uses the React docs plus standards like WCAG and ARIA and tooling such as eslint-plugin-jsx-a11y and axe-core with the react-axe wrapper to run audits on reload and verify keyboard and screen reader behavior
AI-written summary · about
chapters (18)
- 0:00Introduction
- 0:49Welcome
- 1:16Who am I
- 1:36Why Inclusive React
- 2:01Examples
- 4:16Swiss Army Knife
- 4:27Accessibility
- 4:46Standards
- 4:58WCAG
- 5:23Web Accessibility Initiative
- 5:55Semantic JSX HTML
- 6:41HTML Elements
- 7:06Implementation
- 7:36Reactive Alip
- 8:20XCore
- 8:55ReactX
- 9:22Screen Readers
- 9:54Outro
related talks
50mTips, tricks and tools for building accessible React web apps
23m12 Tips For More Accessible React Apps
25mBuilding Inclusive Web Experiences: Web Accessibility in ReactJS
58mInclusive Experiences in React Applications: Championing Neurodivergent Accessibility
41mDemystifying Accessibility in React Apps
49mSupporting accessibility in React: the difficulties and niceties
52mA11y with React Components
27mCompassion-Driven Development: Building Accessible React UI