Designing Accessible Sign Up Forms
summary
Rebuild of a vacation-rentals signup flow surfaces concrete fixes: restore keyboard focus and add a skip to main link, turn the modal into three concise options so tabbing is three stops, force readable contrast, and make error containers programmatically reachable (tabindex="-1") with inputs linked to messages and aria-invalid flags. Use show/hide password, top-aligned floating labels, three text fields for birthdate plus autocomplete, and an accessible autocomplete using role="combobox". Inline validation shows the evidence: +22% success, −22% errors, −42% completion time; audit with Axe/Deque/WAVE.
AI-written summary · about
chapters (7)
- 0:00Introduction to accessibility
- 6:08Problems in signup form
- 10:43Redesigning the signup flow
- 15:58Handling date inputs
- 19:33Inline validation benefits
- 23:06Testing and resources
- 26:27Q&A session
related talks
27mCreating Beautiful, Accessible, and User Friendly Forms
30mPractical guide to building accessible forms in React
14mBuild a signup flow that doesn't suck
52mConsidering Accessible HTML Forms, JavaScript & WAI-ARIA
39mUX & Cognitive Accessibility
50mStructuring Accessible Forms
31mAccessible Forms: It's Not as Difficult as You Think
53mDoing Responsive Right: Accessibility Lessons from the Field