Compassion-Driven Development: Building Accessible React UI
summary
Shows how axe Chrome extension and Lighthouse audits find concrete failures (demonstrated on Netflix, Beyoncé site with ~139 violations, and Udemy with none), explains usable fixes like skip links, focus management and live regions, and describes building a reusable component library for React/Gatsby with React Router accessibility in mind. Covers screen readers (VoiceOver, NVDA), color-contrast tools (color-safe.co, Chrome devtools), testing strategy from unit to E2E and CI, and eslint-plugin-jsx-a11y enforcement.
AI-written summary · about
chapters (13)
- 0:00Intro
- 0:26Agenda
- 1:03What is Accessibility
- 1:24CompassionDriven Development
- 4:14What to look for
- 7:04Improving accessibility
- 7:31assistive technology
- 8:07screen readers
- 8:42auditing
- 9:50accessibility web extensions
- 11:43relativem
- 11:58devtools
- 20:28Best Practices
related talks
12mReact Accessibility: Beyond the Basics
27mA11y And React, Why Is It Important?
25mBuilding Inclusive Web Experiences: Web Accessibility in ReactJS
50mTips, tricks and tools for building accessible React web apps
34mBuilding Accessible Web Apps in React
58mInclusive Experiences in React Applications: Championing Neurodivergent Accessibility
25mBeyond Compliance: Testing for a more Accessible Web
26mEmpathy-Driven Development