Tips, tricks and tools for building accessible React web apps
summary
React accessibility is practical: automated audits show errors up 60% in five years, but React can render clean HTML when developers use semantic JSX and React 16 fragments to preserve lists and tables. Recommendations and tools include create-react-app for built-in linting, eslint-plugin-jsx-a11y for instant IDE warnings, auto-generating IDs with node-uuid, managing focus with refs after routing, setting titles with react-document-title, live announcements via react-aria-live, and runtime checks with axe-core/react-axe — a demo todo app and repo prove these approaches work in large codebases.
AI-written summary · about
chapters (9)
- 0:00Start
- 4:57React Syntax
- 9:29React Component Class
- 12:07React Virtual DOM In Browser
- 16:37Fragments In React 16
- 22:01Routing Is Ally Silent
- 26:20What About HOCs?
- 34:45create-react-app
- 37:05Rules are configurable.
related talks
36mAccessibility in React Application
23m12 Tips For More Accessible React Apps
41mDemystifying Accessibility in React Apps
49mSupporting accessibility in React: the difficulties and niceties
34mBuilding Accessible Web Apps in React
31mHow to Be an A11Y - Creating Accessible React Apps
25mBuilding Inclusive Web Experiences: Web Accessibility in ReactJS
34mBuilding Accessible Components in React