Don’t Be Lazy, Use HTML Labels Correctly

I’m surprised that LinkedIn doesn’t use labels correctly. It’s annoying when you have radio buttons and you can’t click on the text they’re associated with. Check out one of their forms below. You can’t click on the text “You will be totally anonymous”. You have to click on the radio button.

LinkedIn Label Usage

I’m spoiled and I no longer have the patience or the accuracy to click on the radio button. This is a subtle user experience defect, but it takes only a second to fix. All you need is a matching label element to your input element. As a bonus, doing this also makes your form more accessible to screen readers.

<input  type="radio" id="anonymous-radio-button"/>
<label for="anonymous-radio-button">You will be totally anonymous.</label>

 

About these ads

52 comments

  1. This is also valid and doesn’t need an id:

    text

  2. Rookie Mistake — Stop hiring interns to do your UI

    1. calvincopyright · · Reply

      As a high school intern who just designed an interface for a site that a college professor wanted…

      I can completely, unequivocally, support this statement. :)

  3. You can also put the input inside the label, and then you won’t need to add an id to the input or add a for to the label. Not always appropriate, but would work here, probably.

    1. Good point. You can do it that way too. I find it sometimes hard to use when you need to position the the radio button and the label text separately.

  4. Alternatvely, you could use the label implicitly:

    You will be totally anonymous.

  5. I think this is one of the first things I learned even in xHTML and HTML4.01

  6. Not as bad as eBay, still using HTML 4.01.

    1. A lot of e-commerce sites still use old technology. Anyone remember the java, hibernate, spring, etc., stack?

  7. It can be a bit simpler than that: if you wrap the input element in the label element you don’t need the for attribute.

    You will be totally anonymous.

  8. Or just put the inside the , without any of the id crap

  9. Hovering over that image changed the colour of the ‘Save changes’ button, I actually thought it was usable for a second. Ha.

    1. Weird! How does the image change color like that?

    2. If you look carefully, it’s not just the button that highlights on hover. You can see it in the link text too. Its just the entire image getting brightened somewhat on hover.

    3. blagomurch · · Reply

      The whole image gets highlighted, not just the button.

  10. Sometimes, when the company wants that less people will click the button, they remove the link with the radio buttons. You can see that when installing programs and they want you to install their IE-bar or other useless software, you can’t click on the label either

    1. True. LinkedIn might be doing it on purpose. That’s still bad for the user.

  11. Or make the label contain the input element.

  12. I found writing IDs for each and every form element requiring a label to be tedious and didn’t add labels for a long time – until I found that this syntax works as well and is easier to write:

    You will be totally anonymous.

  13. Besides in online forms, this is also an issue in other contexts of the web in terms of user experience. And increasing clickable areas in general is such an easy thing to do.

    1. It’s so easy to do. But developers get lazy sometimes. HTML/CSS is SO tedious :)

  14. Code example again:

    <label><input type=’radio’ />You will be totally anonymous.<label>

  15. Christian · · Reply

    That is really annoying. Every single time. Especially since they could even do a more lazy version by just wrapping the label around the input. Then you don’t need to define an id property on the input and no for property on the label and clicking the text still works:

    You will be totally anonymous.

  16. Christian · · Reply

    That is really annoying. Every single time. Especially since they could even do a more lazy version by just wrapping the label around the input. Then you don’t need to define an id property on the input and no for property on the label and clicking the text still works:

    You will be totally anonymous.

  17. I agree, but actually you don’t even need the “for” part, as long as you put the “label” tag around both the text and the input it works also. So less typing and it still works without the “for” part and copying the ID which takes extra time if someone is really lazy ha ha.

  18. Yeah this is much better in terms of user experience, puzzled how they missed it.

  19. you really have to be patient in completing this stuffs :/

  20. Another issue with some websites (which I can’t remember from the top of my head right now) is that the ‘Tab’ key doesn’t necessarily take the focus to the natural subsequent form element; instead, it puts focus on some random element atop the page far away from where the user would naturally intend to go. I’ve seen this happen with sign-ups and sometimes even login forms!

    1. Now we’re getting into tabindex stuff. I guess you reach a point where you’re balancing between level of effort and usability. Tough choice, but if you have the time usability always wins.

      1. I think that is precisely what determines how good a system is. Things like tabindex is something a coder should be naturally inclined to use. Auto-focus (like how Google and several other websites employ), tabindex, labels.. I guess the list goes on but these should be hardwired into a coder’s brain. Of course, for usability’s sake.

        1. I’d be impressed if every “good” usability convention is hardwired in someone’s brain. I’ll hire you on the spot if you thought about usability that in-depth at the same time you were coding.

          1. Ha ha. I get your point. May be I was hasty (and a little too passionate about usability) when I typed that reply. But I certainly think that little habits like these would do a lot of help in the long run.

            The very fact that such tags as ‘label’, ‘placeholder’, ‘tabindex’ exists is an indication that the code itself wants you to do be aware of usability (and make use of it, naturally) ;)

          2. Those are only guidelines though. I agree with you. In an ideal world everyone would make use of them. This is the real world where you have to make tradeoffs all the time. Do I spend the next week making sure all my html conforms to usability standards? Or do I spend it developing a new feature that would drive user growth by 10%?

          3. Hmm. If it’s down to growth vs. perfection, your point is spot on.

        2. @Sherman said: Do I spend the next week making sure all my html conforms to usability standards? Or do I spend it developing a new feature that would drive user growth by 10%?

          That would be a great thing. However, if your site is fully accessible, you experience a growth rate of approx 20%, as roughly that percentage of people on the internet use some sort of assistive
          technology to interact with websites.

  21. Another issue, on similar lines, is that ‘tabbing’ puts the focus on some random, non-sequential element rather than the naturally following form element. This usually happens in sign-up forms. Pretty frustrating user experience.

  22. […] Message d’intérêt public : utilisez vos balises <label> correctement. […]

  23. @Sherman said: Do I spend the next week making sure all my html conforms to usability standards? Or do I spend it developing a new feature that would drive user growth by 10%?

    Well, I guess if you’re used to proper and valid coding and making sure your html conforms with actual standards to start with, then you still have enough time to focus on your growth. :)

    1. Standards are subjective anyway. Sometimes shipping is more important than conforming.

  24. Maybe you’re a little lazy too. Look, I agree with you. You’ve a valid argument, but c´mon! ¿can’t you make click on the radio button who was created to click on ti? In semantic html code bla bla bla terms yes you’re right but sometimes (all the time) users are lazy, don’t you think?

    1. Well, I do click on the radio button because I don’t have any other choice. Yup, users are lazy. That’s why it’s better to give them larger clickable areas.

  25. Why not put labeltext & input field inside label, like so:
    Label text

    I’m not sure about the accessability for screenreaders, but text and input both are clickable.

    1. This might be even better Jeff. The white space between the input field and the text would be clickable too.

  26. Some website/installers have this special defect so that users can not argue about having Accidentally clicked somewhere in the vicinity of the radio button or checkbox. You will notice this in accepting user agreements. Google, Microsoft and other big players do this all the time – and I’m sure it is intentional.

    1. You’re right RJ. People might do it on purpose. The experience would still be bad for the user though.

  27. Totally agree with you. This has to be fixed since it makes me think when I click on the label and it doesn’t work. So it’s not good enough :)

  28. Reblogged this on Techsnoop's Helper and commented:
    Great design advice for coders

    1. Thanks! Hopefully it’ll be useful to your readers.

  29. the more robust way is to use the for=field_id attribute. It enjoys better support and is more flexible

    http://reference.sitepoint.com/html/label/for

  30. I agree, it is really annoying when you are unable to click in the text for a radio button. Hopefully more web designer will stop being lazy and code these correctly.

  31. […] simple tip on HTML labels: Don’t Be Lazy, Use HTML Labels Correctly It’s annoying when you have radio buttons and you can’t click on the text they’re associated […]

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: