The Cake Is a Lie... And So Is Your Login's Accessibility
summary
Shows a real React login component, runs a Mac VoiceOver demo, and implements concrete fixes that actually make errors and fields visible to screen readers: adding role=alert, wiring up aria-describedby and required/invalid states, and restoring keyboard focus outlines so tab focus is visible. Covers authentication specifics too: don’t disable copy/paste, support passkeys/biometrics with fallbacks, simplify or avoid CAPTCHAs, and lengthen MFA timeouts — the fixes work live in the demo.
AI-written summary · about
chapters (9)
- 0:00Welcome
- 2:58Defining accessibility and disability
- 8:53Screen reader login test
- 12:11Error handling fixes
- 18:12Better error messages
- 20:43Keyboard navigation
- 21:45Auth accessibility fixes
- 26:00Multi-factor authentication and CAPTCHAs
- 27:26Wrap-up
related talks
32mThe Cake Is a Lie... And So Is Your Login’s Accessibility
39mThe Cake Is a Lie... And So Is Your Login’s Accessibility
26mDemystifying Accessibility in React Apps
30mPractical guide to building accessible forms in React
30mMake your React Native apps accessible
34mBuilding Accessible Web Apps in React
48mRadically Accessible Internet Applications 💯
28mBuilding Accessible React Components