Building Inclusive Web Experiences: Web Accessibility in ReactJS
summary
Claims concrete fixes beat platitudes: follow WCAG AA to meet ADA, catch common failures WebAIM finds on top 1M sites — low contrast, missing alt text, empty links and buttons, missing lang — and test early in design. Demonstrated React patterns include focus traps with useRef, aria-live polite for dynamic loading, and a demo scan with axe that finds contrast and missing-label failures while VoiceOver fails to read elements. Use unit and automation tests (axe, axe‑selenium, Lighthouse), do accessibility as a separate test track, not a late add-on.
AI-written summary · about
chapters (10)
- 0:00Inclusive React apps
- 3:13Web accessibility standards
- 7:50Accessibility barriers
- 10:23Semantic HTML fixes
- 12:33ARIA roles and labels
- 15:27Dynamic content ARIA
- 16:56Focus management
- 20:07Accessibility first
- 21:55Accessibility testing tools
- 23:44Live Axe testing demo
related talks
34mBuilding Accessible Web Apps in React
39mBuilding Webapps for everyone - a11y with React
36mAccessibility in React Application
31mHow to Be an A11Y - Creating Accessible React Apps
12mReact Accessibility: Beyond the Basics
41mDemystifying Accessibility in React Apps
50mTips, tricks and tools for building accessible React web apps
28mBuilding Accessible React Components