Building Accessible Components in React
summary
Covers concrete patterns: use semantic tags instead of extra divs, use React fragments to avoid DOM noise, attach labels to inputs and link them with htmlFor, extend native props in TypeScript (extend HTMLButtonElement) so custom buttons keep native handlers, add keyboard handlers mirroring mouse events, manage focus with refs on route changes and set tabIndex=0 for custom items, announce updates with ARIA live, and test with Lighthouse, react-axe (react-ally), ChromeVox and WAVE; cites the Parkwood/Beyoncé accessibility lawsuit.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 1:30Welcome
- 2:17What is accessibility
- 6:21How to build accessible components
- 9:04Why this talk
- 12:49Avoid Generic Naming
- 15:13Fragments
- 17:22Native Element Attributes
- 18:40Adding Titles
- 20:35Defining Custom Elements
- 22:35Keyboard Handlers
- 23:57Focus
- 26:05Ref
- 29:34Demo
related talks
36mAccessibility in React Application
41mDemystifying Accessibility in React Apps
23mBuilding Accessible Components: Best Practices and Business Buy-In
28mBuilding Accessible React Components
16mDemystifying accessibility in React apps
49mSupporting accessibility in React: the difficulties and niceties
50mTips, tricks and tools for building accessible React web apps
25mBuilding Inclusive Web Experiences: Web Accessibility in ReactJS