I was building a signup form. The moment I focused the email field, an error popped up: “Invalid email format.” I hadn’t typed a single character yet. The password confirmation field was the opposite. I typed the whole password, submitted the form, and only then did it say “Passwords don’t match” — after I’d already finished typing. Then I hit submit, and seven error messages showed up all at once. ...
Introduction “How hard can a signup form be?” If that thought has ever crossed your mind… you’ve probably never tested it for accessibility. Forms are the most important interface for user input on the web. Login, checkout, search, surveys — virtually every core web function goes through a form. Yet for countless people, these forms are a complete barrier. Screen reader users can’t tell what an input field is asking for Keyboard-only users get stuck in front of a date picker People with cognitive disabilities see an error message but have no idea how to fix it A web form with multiple input fields — easy to get lost in, just like people navigating a maze. Photo: Susan Q Yin / Unsplash In this post, we’ll go through form accessibility from top to bottom, based on WCAG 2.2. No dry theory — just practical code you can use right away, paired with a demo page I built for this post. ...