Building Forms Mobile Users Will Love
summary
Concrete rules and demos show what to change: use semantic markup and labels, prefer type, autocomplete, inputmode over JS hacks, link hint/error text with aria-describedby, generate unique IDs (RFC helper), treat numeric fields as text plus inputmode="decimal" not type=tel, use autocomplete="one-time-code" for OTPs, ensure 16px minimum font-size to avoid iOS zoom, and prefer compound inputs or native types where they reduce taps. The payoff is less JavaScript, mapped accessibility API benefits, and fewer frustrated mobile users.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:02Accessibility
- 2:31Accessibility Issues
- 3:54Semantic Markup
- 6:00Inputs
- 8:07HTML Attributes
- 10:22Notes
- 13:05Numbers
- 14:46Dates
related talks
27mCreating Beautiful, Accessible, and User Friendly Forms
16mFantastic Forms for mobile web
45mBad Form
50mReal-Life Responsive Web Design
46mMobile accessibility - challenges and best practices
01h 07mInclusive Design Series: How to stop worrying and love accessible forms
52mConsidering Accessible HTML Forms, JavaScript & WAI-ARIA
23mNot a designer? You can make your website more accessible