Rian Rietveld is an authority in the field of web accessibility. For many years now, she has performed accessibility audits and shared her knowledge and skills by providing training for developers, website owners, and website editors.
The form control and its label
Forms contain many different controls for the users to share information with you. To tell users what needs to be filled out or selected, we add a text label.
For example:
- Text fields, for a name and address, with the label “Your first and last name”.
- Text areas, to describe a complaint, with the label “Remarks”.
- Radio buttons, to choose the size of a T-shirt, with the labels “Small”, “Medium” and Large”.
- Check buttons, to agree with the privacy terms, with the label “I agree with the privacy policy”.
- Selects, to pick from a list of countries or colours, with the label “Select a colour”.
Design a label
Less is more… But sometimes you have to give the user more than just the bare minimum. Especially when filling out a form. Provide users with all the help they may need. Filling out a form must go swimmingly.
We listed some considerations for you.
Where to place the label?
People read from the top down and expect the information to be in that order. Place the label above or next to the form control.
Your brain automatically connects what is placed together. That’s why you should make sure that the label is visually close to the form control.
Make sure the label is visible. Always.
Often, to create a clean and minimal design, the placeholder is used as a label. But a placeholder has a different purpose. A label tells you what to fill out and a placeholder tells you how to fill out a form field.
For an email field, the label could be “Your email address”, and the placeholder “name@example.com”.
Another reason not to hide a label is when a form is filled with autocomplete values. Names, addresses and telephone numbers can be automatically pre-filled by the browser. Then, when the label is hidden, the user has to check if every value is filled out with the right input field. When the label is always visible, that’s much easier to do.
Connect a label
Labels and form controls need to be programmatically connected by a for / ID construction. How does that work in the HTML code? Let’s look at a text field:<label for="id-brand-input">Your favourite car brand</label>
<input type="text" id="id-brand-input">
This construction connects the label and form control together. Please note: the ID must be unique on the web page.
The advantages of this connection:
- The clickable area is larger. When you click the label, the connected input field gets automatically focused.
- The input field can be targeted by it’s label-text with voice recognition software, so you can fill out a form with nothing but your voice.
- Screen readers announce the label when the input field gets focus, so users who are blind (or visually impaired) know what to fill out.
Conclusion
The advantages of a visible, connected label are:
- People don’t forget what to fill out when they are typing.
- When fields are filled with an autocomplete it’s easier to check.
- Users of assistive technology can fill out the form.
- The clickable target area is larger.
A visible and connected label gives all users a better understanding about what to fill out in a form. Sticking to well known design patterns makes a form easier to understand and leads to a better conversation.
People with and without a disability benefit here. And you, as a site owner, as well because your visitors have fewer problems filling out your forms.
