The Cake Is a Lie... And So Is Your Login’s Accessibility
summary
Live debugging of a small React login component with VoiceOver on Mac shows exactly what changes make authentication usable: adding role="alert" and aria-describedby so errors are read, toggling aria-required/aria-invalid, replacing placeholders with labels, and restoring visible focus outlines; tests run in Chrome incognito confirm the fixes actually read error context and point to the offending field. Notes cover not disabling paste (password managers), MFA timing pitfalls, passkeys/biometrics, and a real CAPTCHA frustration that hit 15 tries before rage‑quitting.
AI-written summary · about
chapters (10)
- 0:00Welcome
- 1:51Accessibility in login forms
- 9:04Inaccessible login demo
- 13:25Fixing login accessibility
- 19:34Better error messages
- 22:44Form semantics and keyboard
- 24:52WCAG for authentication
- 27:39CAPTCHA challenges
- 29:26Multifactor authentication accessibility
- 31:13Summary
related talks
28mThe 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
26mEmpathy-Driven Development
45mYou're only supposed to blow the bloody doors off!
40mWebsite Accessibility Examples That Hinder Accessibility