Supporting accessibility in React: the difficulties and niceties
summary
React shows concrete wins and concrete pitfalls: reusable input and card components with component reusability and prop enforcement (PropTypes) reduce duplicated markup and let a single fix propagate; focus management uses useRef + forwardRef which works for one-level parents but needs useEffect or DOM queries for deeper cases; React 18’s useId solves duplicate IDs; eslint-plugin-jsx-a11y catches misspelled ARIA; React Testing Library role queries and Storybook’s a11y addon running axe validate outcomes; two-thirds of devs report using React.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:26React and accessibility
- 3:20Form design fundamentals
- 7:55Prop type enforcement
- 10:41Conditional logic and errors
- 13:08Handling focus and refs
- 18:29Accessible card components
- 23:00Context for page hierarchy
- 28:38Design system strategies
- 33:16Summary of concepts
- 36:17Tooling and resources
- 39:01Q&A session
related talks
50mTips, tricks and tools for building accessible React web apps
36mAccessibility in React Application
34mBuilding Accessible Components in React
41mDemystifying Accessibility in React Apps
52mA11y with React Components
16mDemystifying accessibility in React apps
26mDemystifying Accessibility in React Apps
25mBuilding Inclusive Web Experiences: Web Accessibility in ReactJS