Why Your Form Checkboxes Need to Have Label Tags

by 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.

20 Responses to “Why Your Form Checkboxes Need to Have Label Tags”

  1. Adam

    Jun 16th, 2011

    YES! Thank you for writing about this. What an easy way to make a small target into a big one.

  2. Olivier Laviale

    Jun 16th, 2011

    You can also put your input _inside_ the label, that way you don’t have to care about “id” and “for”, that’s very convenient.

    • Anon

      Jun 19th, 2011

      >You can also put your input _inside_ the
      >label, that way you don’t have to care
      >about “id” and “for”, that’s very
      >convenient.

      And also an epic fail in some versions of IE due to MS’s inability to follow published standards.

  3. Bob

    Jun 18th, 2011

    Why haven’t you done it for the checkbox in your comment form?

    • anthony

      Jun 18th, 2011

      It’s a wordpress plugin thing.

      • James

        Jun 19th, 2011

        If you can’t practice what you preach and bother to fix it on your own site, why should we?

        • anthony

          Jun 19th, 2011

          I’m going to look into fixing it. But it’s not recommended to modify the PHP code of plugins as it can cause a fatal error if you make a mistake. Either way, I think you should always look to do what’s best for yourself regardless of what I, or other people, do or don’t do.

        • ablestmage

          Jun 19th, 2011

          It’s not him that’s “not practicing,” it’s code that someone else wrote. It’s entirely acceptable to advise on the correction of a problem that you yourself have difficulty with.

          Plus, his comment checkbox only has the one, not several from which to distinguish.

        • Ficholas

          Jun 30th, 2011

          You could always choose to not read. You can only preach to the willing.

      • Nick

        Jun 19th, 2011

        The good thing about open source is that you can modify the source for good UX. Then you can contribute your change back to the original source and everybody can benefit.

      • Travis

        Jun 19th, 2011

        Anthony,

        You could very easily modify the plugin to fix this issue. If you have any questions about how to do that, shoot me an email. You’re absolutely right that this is important, so there’s no reason not to do what’s necessary to fix it on your site as well.

  4. Gavan Woolery

    Jun 19th, 2011

    I often design my own UI components. Some simple rules I follow (among others):

    1) Clickable area should be as large as possible (for any type of component), while not so large that it looks awkward or takes up too much space.

    2) The chrome of the UI should clearly designate the clickable area.

    Check boxes are one of the most widely-perpetuated poorly designed UI components. I say: don’t use them at all. Instead, create a toggle button, which can optionally have a check or radio symbol in the label designating the state. This clearly shows users that the whole area is clickable. Of course, your options may be more limited depending on what platform you are using.

  5. Ben Alabaster

    Jun 19th, 2011

    Finally, someone concurs with me! I’ve been an advocate for making sure there are properly defined label tags for every form field. Checkboxes, radio buttons, textboxes, drop down lists, the works. The fields should also have their tab indexes properly defined so you can tab through the form in a logical order.


    • Jun 19th, 2011

      Yes! I hate when I hit Tab in a comment form and it takes me to the top of the page instead of the submit button.

      BTW, here’s another massive UI fail (especially if you’re concerned about screen readers): comment forms that don’t work without Javascript. Like this one, that appears to be a perfectly ordinary working comment form, only to display an error message after you’ve typed up and submitted your comment, because you didn’t check the “I am not a spambot” box, because it doesn’t show up (nor even any indication that something should be there) without Javascript.

      Major rule of good UX: don’t let a user spend a bunch of time writing something only to throw it out afterward.

  6. Larry A

    Jun 19th, 2011

    Also works for radio buttons too.

  7. Alan

    Jun 19th, 2011

    I am going to have a mess about and see if I can do something similar in WordPress.

  8. Spyros Rallis

    Jun 25th, 2011

    Check boxes or radio buttons not having a label attached to them is one of the biggest headaches users face. I am talking about the “un-clickability” of non-labeled controls.

  9. Vasily Dernis

    Jul 21st, 2011

    Thats very interesting, i didnt know that

  10. Dimitrij Aleshkov

    Aug 27th, 2011

    Thank you for sharing interesting knowledge. I will defintly try to implement this at my projects. I also see a lot of people sharing knowlege on internet without following there own words. There are one checkbox at the end of this page without implementing your rules. Why? As you say “All it takes is a short and simple line of code” ;)

  11. Andrew

    Nov 25th, 2012

    I just screamed like a little girl at the whole “unordered list” + form elements thing. Someone should tell the developer of that extension it’s called a fieldset.

    Exhibit A why I can’t take WordPress seriously.

    Div class label select your fish list style… checkboxes?! Does not compute!

Leave a Comment