A11y And React, Why Is It Important?
summary
Shows concrete fixes: audits with Chrome Lighthouse, deeper checks with the Axe extension, and automated linting via ESLint plugin jsx-a11y. Demonstrates a broken site that lacks alt text and form labels, then adds alt tags, associated <label> IDs and simple ARIA roles, raising a Lighthouse accessibility score from 61 to 98. Notes Gatsby import quirks, demos keyboard navigation failures, and proves quick edits plus linting and browser tools find and prevent regressions.
AI-written summary · about
chapters (14)
- 0:00Start
- 1:12About Me
- 1:38Devs with Disabilities Meetup
- 8:57Percentage of Disabled Americans
- 9:45Performance Tab
- 10:48Design Systems at Dropbox
- 12:04Real-World Examples
- 12:25Demo
- 16:44Accessibility
- 17:09Navigation
- 19:13Accessibility Tab
- 19:47Chrome Audits
- 21:59Es Lint
- 22:19Install Es Lint Plugin Jsx
related talks
12mReact Accessibility: Beyond the Basics
27mCompassion-Driven Development: Building Accessible React UI
08mA11Y and React
31mHow to Be an A11Y - Creating Accessible React Apps
22mPrioritising Accessibility to Web Development
50mTips, tricks and tools for building accessible React web apps
13mA11y Broke My Build
25mBuilding Inclusive Web Experiences: Web Accessibility in ReactJS