12 Tips For More Accessible React Apps
summary
Title promises 12 but runtime forces a compact set of practical rules: document outlines, visible but screen-reader-only labels, correct semantics like use button if you need a button, fragments to avoid invalid HTML, manual focus management for modals and route changes, and accessible notifications via aria live regions. Demos show a modal that breaks keyboard focus and a fix that returns focus correctly. Tooling mentioned: browser extension for headings, Reach UI components, react-router vs reach router, and automated checks with react-axe / axe-core.
AI-written summary · about
chapters (7)
- 0:00Intro
- 1:02Create a sound document outline.
- 7:29Use if you need a button
- 9:11Use fragments to avoid invalid HTML
- 11:11Take care of focus management
- 16:37Announce page changes
- 21:30Test your React code automatically
related talks
50mTips, tricks and tools for building accessible React web apps
41mDemystifying Accessibility in React Apps
36mAccessibility in React Application
34mBuilding Accessible Components in React
31mHow to Be an A11Y - Creating Accessible React Apps
34mBuilding Accessible Web Apps in React
16mDemystifying accessibility in React apps
52mA11y with React Components