Member-only story
Designing accessible forms: the 10 foundational rules
How to design forms with every user in mind.
I’m sure at some point in our lives we’ve all had a painful experience filling out a form on the web. Confusing inputs, unclear expected formats, cryptic error messages, lack of keyboard-accessibility… The list could go on and on.
Now imagine including a disability or impairment on top of that experience (blindness, color-blindness, motor skill impairments, cognitive disabilities, etc).
Forms are needed for all sorts of things online. You use them to sign up for a service, or to log in to your account, or to place an order on an e-commerce site. Forms are everywhere!
So as designers and developers, let’s make them good.
Below are 10 guidelines you can follow to make your forms more accessible and more user-friendly today.
1. All inputs should have associated labels
Labels are important for identifying your inputs. They help sighted users as well as blind users know what each input is for. Labels are especially important for screen readers so that they can correctly announce what each input is. You should use the actual label HTML element as well and not simply a span or div element.
