Creating Beautiful, Accessible, and User Friendly Forms
summary
Argues that shorter forms increase completion and goodwill, showing concrete tradeoffs: split signups (2 fields then more) raise conversions; avoid dropdowns for dates and small choices. Recommends using HTML5 date, email, number input types and min/max to limit values, using optgroup and typeahead for long selects, and communicating rules inline (password strength, show/hide) while validating server-side. Covers accessibility tactics like aria-live="polite" and aria-required="true" and warns against placeholder-only labels and premature inline error messages.
AI-written summary · about
chapters (11)
- 0:00Designing better forms
- 1:37Minimizing user friction
- 4:10Gradual engagement
- 5:12Optimizing HTML5 input types
- 8:09Improving input usability
- 11:21Managing complex data entry
- 13:21Labels and accessibility
- 17:12Password field best practices
- 19:04Effective error validation
- 21:29Clarifying field requirements
- 23:44Inclusive gender forms
related talks
45mBad Form
29mDesigning Accessible Sign Up Forms
52mConsidering Accessible HTML Forms, JavaScript & WAI-ARIA
19mBuilding Forms Mobile Users Will Love
31mAccessible Forms: It's Not as Difficult as You Think
01h 07mInclusive Design Series: How to stop worrying and love accessible forms
30mPractical guide to building accessible forms in React
28mAccessible Forms