Practical guide to building accessible forms in React
summary
Promises specific fixes and shows a working signup form with keyboard focus outlines, inline and summary validation, live announcements and autocomplete rather than vague design advice. It uses concrete APIs and tools: aria-describedby, use ID, role alert, aria-invalid and aria-required for semantics, axe and ESLint for automated checks, Testing Library plus VoiceOver NVDA Jaws and TalkBack for manual tests, and a demo form that validates, announces errors, and successfully creates an account.
AI-written summary · about
chapters (11)
- 0:00Web accessibility intro
- 6:15Focus and keyboard navigation
- 7:59Clear input labeling
- 10:07Hidden labels and ARIA
- 15:03Accessible hints and descriptions
- 16:45Required vs optional fields
- 19:14Error validation and feedback
- 23:50Instant validation and live regions
- 25:16Live accessible form demo
- 26:01Testing form accessibility
- 28:49Screen reader testing
related talks
29mDesigning Accessible Sign Up Forms
26mDemystifying Accessibility in React Apps
41mDemystifying Accessibility in React Apps
50mStructuring Accessible Forms
50mTips, tricks and tools for building accessible React web apps
23m12 Tips For More Accessible React Apps
34mBuilding Accessible Components in React
27mEnhancing Forms with React Server Components and React 19