Accessibility in React Application
summary
Claim: React apps can meet accessibility standards if concrete steps are taken. Use semantic HTML and the 100+ native elements rather than divs, prefer fragments to avoid invalid list markup, and treat focus deliberately using useRef and tabindex="-1" so keyboard users never lose place. Feed dynamic announcements through react-aria-live and ARIA alert/status. Verify with tooling like axe DevTools and eslint-plugin-jsx-a11y and end to end tests in Cypress or Playwright and Storybook’s accessibility tab.
AI-written summary · about
chapters (14)
- 0:00Accessibility in React
- 1:28Current challenges in single-page applications
- 4:40React accessibility concerns
- 5:00Semantic HTML in React
- 8:36Semantic HTML benefits
- 11:03ARIA for non-semantic
- 12:49Avoid invalid HTML with fragments
- 15:44React attribute errors
- 16:04Focus management in React
- 23:04Page changes and notifications
- 25:54Testing React accessibility
- 28:45Component testing with Storybook
- 29:06Summary and myths
- 30:12Question and answer session
related talks
41mDemystifying Accessibility in React Apps
50mTips, tricks and tools for building accessible React web apps
34mBuilding Accessible Components in React
34mBuilding Accessible Web Apps in React
26mDemystifying Accessibility in React Apps
16mDemystifying accessibility in React apps
31mHow to Be an A11Y - Creating Accessible React Apps
25mBuilding Inclusive Web Experiences: Web Accessibility in ReactJS