The Cake Is a Lie... And So Is Your Login’s Accessibility
summary
Typical login forms fail assistive tech and the talk shows concrete fixes using a React + Vite app with a broken branch and a fixed branch so you can hear the difference with VoiceOver on macOS. It demonstrates swapping placeholders for labels, fixing contrast and focus (don’t use outline:none), adding role="alert", aria-describedby, aria-invalid and required on inputs, hiding decorative icons, and recommends magic links, passkeys, flexible MFA and never disabling paste — the fixed demo reads and navigates correctly.
AI-written summary · about
chapters (9)
- 0:00Accessible login challenges
- 3:15Portal metaphor for accessibility
- 8:12Accessibility beyond disabilities
- 12:32Login form accessibility pitfalls
- 17:31Error handling for inclusive auth
- 19:42Testing login forms with screen readers
- 26:36WCAG for accessible authentication
- 32:16Low-hanging fruit for better accessibility
- 33:43Ensuring real accessibility
related talks
28mThe Cake Is a Lie... And So Is Your Login's Accessibility
32mThe Cake Is a Lie... And So Is Your Login’s Accessibility
30mPractical guide to building accessible forms in React
40mWebsite Accessibility Examples That Hinder Accessibility
21mAccessibility 101: Getting started with assistive technology and product inclusion
26mDemystifying Accessibility in React Apps
33mAccessibility Done Right
34mBuilding Accessible Web Apps in React