The Cake Is a Lie... And So Is Your Login’s Accessibility
summary
A broken React login demo becomes usable with a few concrete changes: adding role="alert" makes error banners announce immediately, wiring fields with aria-describedby plus aria-required and aria-invalid lets VoiceOver read which input fails, and a visible focus outline fixes keyboard discovery. Live demo shows the error and the specific password message after fixes. Advice includes keeping copy/paste, using WebAuthn/passkeys with fallbacks, preferring invisible CAPTCHAs, and easing MFA timeouts.
AI-written summary · about
chapters (7)
- 0:00Introduction and setup
- 3:38Accessibility as a test chamber
- 6:48Live demo with screen reader
- 11:00Fixing error handling in React
- 16:56Improving form semantics and UX
- 20:28WCAG authentication guidelines
- 23:57Final tips and conclusion
related talks
47mBuilding Accessible Web Components
50mIt’s Alive! Facing The Monsters Of Accessible Live Regions
39mBuilding Webapps for everyone - a11y with React
31mDeveloping for Everyone
01h 07mA web for anyone, anywhere, anytime
43mTalk To Me - Making web sites accessible
28mYou're only supposed to blow the bloody doors off!
23mPractical A11Y for Web Apps