Demystifying accessibility in React apps
summary
Explains how the browser builds an accessibility tree and why semantic HTML (over 100 element types) gives built‑in roles and behaviors, when to use ARIA vs native elements, and concrete fixes: connect labels with for/id, hide decorative icons with aria-hidden, expose hints and errors via aria-describedby plus unique ids using useId hook, mark invalid fields with aria-invalid, and announce notifications with aria-live="polite"| "assertive". Examples include icon buttons, visually hidden labels, input validation errors, and live region alerts.
AI-written summary · about
chapters (9)
- 0:00Introduction to accessibility
- 1:34Accessibility tree and semantic HTML
- 3:43ARIA roles and when to use
- 6:01Hiding decorative elements properly
- 7:50Labels and accessible names for inputs
- 10:41Hints and accessible descriptions
- 11:24Validation and error communication
- 12:52Accessible notifications with live regions
- 14:42Summary and further resources
related talks
26mDemystifying Accessibility in React Apps
41mDemystifying Accessibility in React Apps
36mAccessibility in React Application
28mBuilding Accessible React Components
34mBuilding Accessible Components in React
34mBuilding Accessible Web Apps in React
50mTips, tricks and tools for building accessible React web apps
31mHow to Be an A11Y - Creating Accessible React Apps