Building Accessible React Components
summary
Covers concrete component patterns: an input plus tied error component using aria-describedby, marking errors with aria-invalid and a div with role="alert", and an icon/image component that uses aria-hidden or a visually hidden label. Calls out WebAIM 2020 finding that 98.1% of top sites fail WCAG, notes “one in every 10 users” has a disability, warns against disabling buttons (use aria-disabled + CSS instead), recommends reach/react-aria dialog libraries, jsxli actscore and pa11y for automated checks, and prefers reduced-motion media queries.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 2:00What is Accessibility
- 3:37What isWCAG
- 5:01Common Problems
- 10:57Error Handling
- 12:30Area Invalid
- 13:26Handling Disabled Buttons
- 14:09Disable Button for Screen Readers
- 15:59Focus Indicators
- 17:02Link Component
- 18:30Content Visibility
- 20:02Hiding Content
- 21:22Hidden Content
- 23:20SVG Icons
- 24:19Link Warning
- 25:18Animations
related talks
47mBuilding Accessible Web Components
26mDemystifying Accessibility in React Apps
16mDemystifying accessibility in React apps
34mBuilding Accessible Components in React
34mBuilding Accessible Web Apps in React
41mDemystifying Accessibility in React Apps
40mAccessibility-flavored React components make your design system delicious
25mBuilding Inclusive Web Experiences: Web Accessibility in ReactJS