by anthony on 06/15/11 at 4:00 pm
When designers think about forms, they usually think about text fields and submit buttons. Checkboxes don’t always get as much attention because they aren’t used as often.
But this doesn’t mean that designers should ignore how they display their checkboxes. They should pay more attention to them because most violate accessibility rules.
All checkboxes have labels, but not all them use label tags. This makes it hard for users to tick the checkbox. Without label tags, users can’t click the label to tick the checkbox. Instead, they have to click the checkbox itself. The checkbox is a small target to hit with accuracy, especially for motor-impaired users.
When label tags are added to the checkboxes, users are able to click the label to tick it. A clickable label gives them a larger target to hit, which leads to quicker task completion.
Screen Reader Accessible
Checkboxes without label tags are inaccessible to screen readers. Screen readers can’t figure out which label belongs to which checkbox based on positioning alone.
The screen reader will read the labels and checkboxes separately to users. This makes it hard to figure out which label goes with which checkbox. But when you add the label tags in, each checkbox gets read to the user with the correct label.
Label tags act as an anchor for form controls. It not only works for checkboxes, but you should use it for every form control that has a label. This will not only make your forms more accessible for screen readers, but it’ll make them more usable by allowing users to click the form control labels.
The beauty of this technique is that it doesn’t take much to improve the user experience. Adding a short and simple line of code can do wonders for both motor and visually impaired users.