When designers think about forms, they usually think about text fields and submit buttons. Checkboxes often get ignored because they aren’t used as often. But ignoring checkboxes can affect how users fill out your form. Designers should pay more attention to them because most are hard to click and violate accessibility rules.
Clickable Checkbox Label
All checkboxes have labels, but not all 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. This causes users to struggle because the checkbox is a small target to hit especially for motor-impaired users.
When label tags are added to the checkboxes, users are able to click the label to tick it. The label gives them a larger target to hit, which leads to less struggle and quicker task completion. It’s also more intuitive because users expect to activate an element when they click its label. They do it on menus and buttons all the time.
Screen Reader Accessibility
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. This causes the screen reader to read the labels and checkboxes separately to users.
Users will struggle 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 all form elements. It not only works for checkboxes, but you should use it for every form element that has a label. This allows users to activate the element by clicking the label.
It doesn’t take much to improve the user experience when all you have to do is add a short line of code. Making your checkbox labels clickable can not only do wonders for motor-impaired users but every user on your site.