Comments on: Tricks to make your site easier to use http://friendlybit.com/html/make-your-site-easier-to-use/ You have found Friendly Bit, a web development blog. I focus on client side technologies like CSS, HTML and Javascript. You find my articles below and categories to the right. Sat, 17 May 2008 11:08:43 +0000 http://wordpress.org/?v=2.5.1 By: Emil Stenström http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3822 Emil Stenström Wed, 16 Aug 2006 10:38:37 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3822 @Adam: Good you like it! (fixed the spelling error too, thanks :) @Adam: Good you like it! (fixed the spelling error too, thanks :)

]]> By: Adam Zakreski http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3765 Adam Zakreski Fri, 11 Aug 2006 20:00:54 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3765 While we're being picky... Last sentence of the last paragraph of "Split up your content". Directory is speelt rong. Good article though! While we’re being picky… Last sentence of the last paragraph of “Split up your content”. Directory is speelt rong.

Good article though!

]]> By: Johan http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3575 Johan Fri, 04 Aug 2006 17:28:05 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3575 label { cursor: pointer; } why not cursor: help and add a title attribute to the label tag label { cursor: pointer; }

why not cursor: help and add a title attribute to the label tag

]]> By: Martin Jansson http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3540 Martin Jansson Thu, 03 Aug 2006 08:48:58 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3540 @Roger Johansson: Oops, for some reason I thought that browsers supporting labels would support labels wrapping the input-element, but i was wrong: Internet Explorer (of course) don't. However, adding the <code>for</code>-attribute to the wrapping label fixes this in IE. I do not have access to a screenreader to test the support for this method, all I have is the Fangs-plugin to Firefox, which displays all three methods (label with for, wrapping label and wrapping label with for) the same way. If anyone would like to try it out in a screenreader you can use <a href="http://marja.se/tests/labels-testcase.html" rel="nofollow">this small test case</a> @Roger Johansson: Oops, for some reason I thought that browsers supporting labels would support labels wrapping the input-element, but i was wrong: Internet Explorer (of course) don’t. However, adding the for-attribute to the wrapping label fixes this in IE.

I do not have access to a screenreader to test the support for this method, all I have is the Fangs-plugin to Firefox, which displays all three methods (label with for, wrapping label and wrapping label with for) the same way.

If anyone would like to try it out in a screenreader you can use this small test case

]]> By: Emil Stenström http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3537 Emil Stenström Wed, 02 Aug 2006 23:13:55 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3537 @Roger Johansson: I had no idea Safari didn't support that, I guess it should get a nice little javascript to do it instead? Good comment. @Roger Johansson: I had no idea Safari didn’t support that, I guess it should get a nice little javascript to do it instead? Good comment.

]]> By: Roger Johansson http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3524 Roger Johansson Wed, 02 Aug 2006 18:09:28 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3524 Changing the cursor to pointer for label elements sounds like a good idea at first, but there are browsers (like Safari) that do not make label elements clickable. I find it very confusing to see the cursor change to a pointer when nothing happens if I click. Martin: There is better browser support for the for + id attributes than for wrapping form controls in label elements. Explicitly associating form elements with their labels is also what is recommended by WCAG. Changing the cursor to pointer for label elements sounds like a good idea at first, but there are browsers (like Safari) that do not make label elements clickable. I find it very confusing to see the cursor change to a pointer when nothing happens if I click.

Martin: There is better browser support for the for + id attributes than for wrapping form controls in label elements. Explicitly associating form elements with their labels is also what is recommended by WCAG.

]]> By: Emil Stenström http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3510 Emil Stenström Wed, 02 Aug 2006 11:50:07 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3510 @zcorpan: Ah, good to hear about IE7. Seems better than I expected. If you read what sherzy said you'll see that we only wanted to change the cursor for checkboxes and radio buttons. That was the point. I believe changing cursor is a good idea, it's making it easier for the user to see that they don't have to click that tiny checkbox. The browsers don't support it so we have to do it ourselves. @zcorpan: Ah, good to hear about IE7. Seems better than I expected.

If you read what sherzy said you’ll see that we only wanted to change the cursor for checkboxes and radio buttons. That was the point.

I believe changing cursor is a good idea, it’s making it easier for the user to see that they don’t have to click that tiny checkbox. The browsers don’t support it so we have to do it ourselves.

]]> By: Martin Jansson http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3509 Martin Jansson Wed, 02 Aug 2006 11:48:08 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3509 When I use clickable labels for checkboxes and radio buttons (which I always do, by the way) I always put the input-element <em>inside</em> the label. In that way, you don't have to use the "for" -attribute for the label to be connected to the input-element. And it also makes positioning easier as you can position the label with the checkbox or radio button inside it. <code lang="html"><label><input type="checkbox"> Click me!</label></code> When I use clickable labels for checkboxes and radio buttons (which I always do, by the way) I always put the input-element inside the label. In that way, you don’t have to use the “for” -attribute for the label to be connected to the input-element. And it also makes positioning easier as you can position the label with the checkbox or radio button inside it.
<label><input type="checkbox"> Click me!</label>

]]> By: zcorpan http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3504 zcorpan Wed, 02 Aug 2006 09:59:38 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3504 IE7 does support that selector, although you can probably make it a bit simpler: <code>input + label {...}</code> ...since you normally only use the label after the input for check boxes and radio buttons anyway (unless you wrap the form control inside the label). If you're using <label> elements and they aren't clickable then you're using them incorrectly, and they will not aid assistive technologies. Oh, and by the way, I wouldn't recommend changing the cursor for labels. It is the responsibility of the browser to make labels appear clickable, and changing the cursor might be confusing or annoying. IE7 does support that selector, although you can probably make it a bit simpler:
input + label {...}
…since you normally only use the label after the input for check boxes and radio buttons anyway (unless you wrap the form control inside the label).

If you’re using <label> elements and they aren’t clickable then you’re using them incorrectly, and they will not aid assistive technologies.

Oh, and by the way, I wouldn’t recommend changing the cursor for labels. It is the responsibility of the browser to make labels appear clickable, and changing the cursor might be confusing or annoying.

]]> By: Emil Stenström http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3499 Emil Stenström Wed, 02 Aug 2006 07:21:02 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3499 @Agrajag: Very picky are we? :) *fixed* @Agrajag: Very picky are we? :) *fixed*

]]> By: Agrajag http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3494 Agrajag Wed, 02 Aug 2006 03:55:25 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3494 Hi I just thought I would point out that, rather ironically, you used the wrong 'to' in the last paragraph of the section about writing well :P. It should be replaced with 'too'. Hi
I just thought I would point out that, rather ironically, you used the wrong ‘to’ in the last paragraph of the section about writing well :P. It should be replaced with ‘too’.

]]> By: Emil Stenström http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3478 Emil Stenström Tue, 01 Aug 2006 22:13:32 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3478 @sherzy: Interesting. Well I guess it doesn't matter much as long as they use the <label> tags anyway. Perhaps classing the checkboxes and radiobuttons instead? You wouldn't want people to miss the nice feature. To add the cursor to only the other elements in newer browsers you can use:<code lang="css"> input[type="checkbox"]+label { cursor: pointer } </code> ...to affect only the checkboxes (Similar code for radio buttons). But of course IE (not even IE7) will support that. @sherzy: Interesting. Well I guess it doesn’t matter much as long as they use the <label> tags anyway. Perhaps classing the checkboxes and radiobuttons instead? You wouldn’t want people to miss the nice feature.

To add the cursor to only the other elements in newer browsers you can use:
input[type="checkbox"]+label { cursor: pointer }
 …to affect only the checkboxes (Similar code for radio buttons). But of course IE (not even IE7) will support that.

]]> By: sherzy http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3476 sherzy Tue, 01 Aug 2006 21:57:41 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3476 Emil: That is a good point, and on my own site I may implement it. Unfortunately the designers and information architects where I work do not agree – they feel that it would confuse the user to have text and select list label appear clickable. Emil: That is a good point, and on my own site I may implement it. Unfortunately the designers and information architects where I work do not agree – they feel that it would confuse the user to have text and select list label appear clickable.

]]> By: Emil Stenström http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3475 Emil Stenström Tue, 01 Aug 2006 21:19:58 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3475 @sherzy: Why not make the labels of the other form elements clickable too? Clicking on a text element's label focuses the textbox. How is that bad? @sherzy: Why not make the labels of the other form elements clickable too? Clicking on a text element’s label focuses the textbox. How is that bad?

]]> By: sherzy http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3473 sherzy Tue, 01 Aug 2006 20:32:17 +0000 http://friendlybit.com/html/make-your-site-easier-to-use/#comment-3473 I am happy to see your tip about using labels, and the CSS: label { cursor: pointer; } seems like a nice idea, until you realize that it will make ALL of your labels appear clickable, which is not desirable. Remember, labels should be used for all form fields (text boxes and areas, select lists) in order to aid the disabled, as explained in the webstandards article. I am happy to see your tip about using labels, and the CSS: label { cursor: pointer; } seems like a nice idea, until you realize that it will make ALL of your labels appear clickable, which is not desirable. Remember, labels should be used for all form fields (text boxes and areas, select lists) in order to aid the disabled, as explained in the webstandards article.

]]>