Radically Accessible Internet Applications 💯
summary
A live React demo app (A11Y DEMO APP) gets audited and incrementally fixed: wildcard CSS removing focus outlines, converting divs to real buttons with aria-label and changing a modal so setAppElement avoids aria-hidden on the body. Offscreen content uses the Inert attribute (polyfill suggested), landmarks become semantic main/header, and inputs get explicit labels or tabindex="-1" for scripted focus. Tests run with aXe Coconut and aXe WebDriverJS to catch contrast, label, and focus issues and verify improvements.
AI-written summary · about
chapters (14)
- 0:00Start
- 5:34Accessibility Wins
- 12:26Jsx
- 14:40Menu Button
- 15:25Menu Icon
- 21:01Tabindex Attribute
- 23:34Headings
- 29:12React Modal
- 32:24Color Contrast Problems
- 33:53Color Experiment
- 35:34Manual Testing
- 42:45Placeholder Text
- 45:09Chrome Accessibility Debugger
- 47:00Resources
related talks
39mBuilding Webapps for everyone - a11y with React
34mBuilding Accessible Web Apps in React
41mDemystifying Accessibility in React Apps
36mAccessibility in React Application
27mMaking Interactions Accessible to All Users
26mDemystifying Accessibility in React Apps
31mHow to Be an A11Y - Creating Accessible React Apps
29mJavaScript for Everybody