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 much. However, this doesn’t mean that designers should ignore how they display checkboxes. In fact, they should pay more attention to it because most form checkboxes violate usability and accessibility rules.
All checkboxes have labels, but not all checkboxes use label tags to display their labels. This can create clicking problems for users. Checkboxes are small and hard to target. Without the label tags, users can’t click the checkbox labels to tick the checkbox. Instead, they’re forced to target and click the small checkbox itself, which can cause user frustration, especially for motor-impaired users.
That’s not the only problem. 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. Instead of getting the labels read to them with the associated checkbox, the screen reader reads the labels and checkboxes separately to users. This makes it hard to figure out which label goes with which checkbox. However, 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 to activate the form controls. The beauty of this technique is that you don’t need much to improve the user experience. All it takes is a short and simple line of code.