5 little ways to make forms better.
1. Give each input a label
Labels provide information about each input. Sighted users will see the label. Screen reader users will hear it.
Users can click the label too which will either set focus to the input or mark radio buttons/checkboxes as checked.
To associate the label to the input, make sure the label's for
attribute matches the input's id
.
<label for="username">Username</label>
<input id="username">
2. Group related inputs together
Use a fieldset and legend to group related inputs together.
Take a question that asks the user if they are over 18 years old with two radio buttons: yes and no.
Without a fieldset/legend, when the radio button is focused, screen readers will announce ‘Yes’.
But what is the user to do given the question itself has not been announced?
With a fieldset/legend, screen readers will announce ‘Are you over 18 years old? Yes’ which lets users know how to answer the question properly.
<fieldset>
<legend>Are you over 18 years old?</legend>
<input type="radio" name="over18" id="over18yes" value="yes"><label for="over18yes">Yes</label>
<input type="radio" name="over18" id="over18no" value="no"><label for="over18no">No</label>
</fieldset>
Optional radio buttons need a ‘none’ option
Radio buttons cannot be unchecked once they are selected. So if the question is optional, you'll need a ‘None’ option.
<fieldset>
<legend>Do you like cheese?</legend>
<input type="radio" name="cheese" id="cheeseYes" value="yes"><label for="cheeseYes">Yes</label>
<input type="radio" name="cheese" id="cheeseNo" value="no"><label for="cheeseNo">No</label>
<input type="radio" name="cheese" id="cheeseNone" value="none"><label for="cheeseNone">Prefer not to say</label>
</fieldset>
Don't submit a form when a select box value changes
Select boxes that submit the form automatically when the user selects an option causes problems for keyboard and screen reader users.
Don't use multi-select select boxes
Multi-select select boxes let users select multiple options from a list.
But users find them difficult to use because they require a particular the user to use a particular set of keys at the same time. Use checkboxes instead.
Summary
That's all. 5 little tips to make forms better.
Checklist
- Give each input a label
- Group related inputs together
- Optional radio buttons need a ‘none’ option
- Don't submit a form when a select box value changes
- Don't use multi-select select boxes
I write articles like this and share them with my private mailing list. No spam and definitely no popups. Just one article a month, straight to your inbox. Sign up below: