Comments on: 3 Ways to Make Checkboxes, Radio Buttons Easier to Click User Experience Movement Mon, 15 Jan 2018 03:40:42 +0000 hourly 1 By: Spencer Thu, 01 Dec 2016 16:51:00 +0000 Great article! We’re going to implement some of this on a site right now.

Seeing that JQueryUI does a lot of this out of the box, allowing you to style some of the fields a bit without inhibiting accessibility.

One thing that I found odd, not having read a UXMovement article in a while, is all the jumbled gobbledy gook at the end of the post. There’s a product section that doesn’t relate to the content of the post and doesn’t have much context, affiliates, related articles, social sharing options, and the author’s info. All of these seem to have the same visual hierarchy. Individually, the social items and author are normal and help the post, but combined with the other items the bottom of articles feel very confusing and disjointed. Just a quick observation! Felt odd to see this confusing mash-up on a UX site.

By: Jeff Burnz Sun, 08 Feb 2015 13:58:40 +0000 Thank-you for the ideas, I have used the button zone idea in the latest version of my Drupal theme project (has about 60 000 users) in an attempt to improve checkbox and radio UX in mobile, it seems to be working pretty good, certainly in Android its a vast improvement.

Another method I have implemented is to use an image to replace the label (using an accessible text image replacement method), which gives a huge touch target, this is kind of the same thing but only really useful when it makes sense (in this case users are setting the alignment of images in their posts).

By: Andrew Sun, 25 Nov 2012 20:49:20 +0000 You have to place ID’s on the inputs, and use that same ID in the label’s FOR attribute to get it to work in Safari (actually, I’ve just been doing that for so long I didn’t even realize the other browsers worked with that now.

Nesting the input is not correct. I don’t even think the elements will validate without the FOR method in the near future – it’s essentially saying the input is part of the input’s label, and screenreaders will often muck it up.

If you ask me, there should have just been a label attribute for the input fields from the beginning. The whole “use a sibling element to identify the next element in the document” thing has always baffled me.

By: tomelders Mon, 05 Sep 2011 09:24:37 +0000 A quick note for anyone wanting to use labels that interact with the form inputs: In order for it to work correctly in Safari, you need to nest the input in the label

Label Text

Which looks a bit clunky to me, but is apprently the correct way to use labels now.

By: Travis Almand Mon, 22 Aug 2011 21:47:26 +0000 Here’s an idea of where to start:

In this case you should be able to style the label tag however you wish to look like a clickable zone. Including the cursor and hover effects.