Comments on: Using labels in a nice semantic fashion

By: Teddy Zetterlund

Teddy Zetterlund — Wed, 28 Nov 2007 14:31:08 +0000

Name
Don’t do this – it doesn’t work well in screen readers, and it doesn’t make much semantic sense either. Labels describe forms, they don’t contain them.

By: Robert Nyman

Robert Nyman — Tue, 09 Oct 2007 08:24:11 +0000

Guilherme,

Always!

By: Guilherme Zuhlke O'Connor

Guilherme Zuhlke O'Connor — Tue, 09 Oct 2007 07:25:29 +0000

Yes, I know. But one can dream, can’t one?

By: Robert Nyman

Robert Nyman — Mon, 08 Oct 2007 07:56:15 +0000

Guilherme,

That would be a nice way to do it. However, not an alternative in our toolbox:

By: Guilherme Zuhlke O'Connor

Guilherme Zuhlke O'Connor — Sun, 07 Oct 2007 00:43:41 +0000

I totally agree, but I must say both methods seem a little weird to me.

The first one bothers me because the label is in fact an element of the form element and it is strange to have two separated things that must be connected, which happens in both ways (by the for attribute in the first, and by inclusion in the second)

I would really like if labels could be written like this:

To me, seems natural that the label is a part of the form element as much as the id or the value, but not otherwise as the second mode suggests. Anyway, among the possible options, I certainly stick with the one you propose.

By: Robert Nyman

Robert Nyman — Fri, 05 Oct 2007 10:51:12 +0000

Andreas,

Absolutely, educating people is the key.

By: Andreas

Andreas — Fri, 05 Oct 2007 09:26:26 +0000

That’s true, and at work neither do I, but on personal projects I don’t really care about IE and always encourage IE users to upgrade to a modern browser.

I believe that if more people did that, less people would be using IE…

By: Robert Nyman

Robert Nyman — Wed, 03 Oct 2007 06:46:44 +0000

Andreas,

Well, most of us don’t have the luxuary to not support a web browser that has about 90% of the web browser market…

By: Andreas

Andreas — Wed, 26 Sep 2007 12:57:11 +0000

I always put the form-element inside the label because I think the extra id-attribute clutters the code.
I don’t understand why the for-attribute can’t work with the (required) name-attribute of the form-element instead? That way you wouldn’t need to mess up your code with unnecessary attributes.
I stopped caring about IE years ago so not really bothered that it doesn’t work there.

By: Robert Nyman

Robert Nyman — Tue, 25 Sep 2007 20:48:20 +0000

Arjan,

That is a nice feature, but it’s achieved with using a correct for attribute, not necessarily having the, for example, checkbox within the label element.

By: Arjan Eising

Arjan Eising — Tue, 25 Sep 2007 19:48:55 +0000

I agree with the point on the form field outside the label element. But I think it might good to put the form field inside the label element when it is a check box or radio box. In this way it is easier to click on those little buttons with their label.

By: Robert Nyman

Robert Nyman — Tue, 25 Sep 2007 15:05:35 +0000

jbot,

Well, that is a way to use it. But I still think that it shouldn’t include the form element within the label element.

By: jbot

jbot — Tue, 25 Sep 2007 14:26:52 +0000

If you want to use implicit labels, but accentuate which part is the label, then wrap the label text in a definition tag (DFN), like so:


<label for="comment">
    < dfn>Comment</dfn>
    <textarea name="user_comment" id="comment"> </textarea>
</label>

By: Robert Nyman

Robert Nyman — Tue, 25 Sep 2007 06:44:11 +0000

Good to see that so many share my opinion!

Deborah,

Ah, good ol’ mr. Featherstone. I guess I need to have a talk with him then! But I don’t think it’s necessarily poor accessibility, it’s more about semantic meaning and, to me, not exactly using the element as it was intended.

Nick Webb,

Partly, I agree with you; it is good to set up a connection, but usually the for attribute is sufficient for this. But I don’t think that a label element is the solution. I’d rather say that we’re missing a proper elements for this in the specification.

Jules,

Thanks! Fixed it.

By: Steven Clark

Steven Clark — Mon, 24 Sep 2007 21:51:28 +0000

True, divitis by any other name is still divitis. Nice article Robert, I wasn’t aware you could use label in this way. Thanks.

By: Petr Urbancik

Petr Urbancik — Mon, 24 Sep 2007 17:06:30 +0000

I vote for the “label-outside-formfield”. I am used to take JS to improve accessibility of my forms and when you have the for argument, it is easier to handle the elements in DOM. In case of making compact forms (labels convert to a auto-hiding default value), the concept “form field within a label” is a problem.

By: Roger Johansson

Roger Johansson — Mon, 24 Sep 2007 17:03:54 +0000

Totally agreed. Form controls inside labels don’t make sense.

By: Jules

Jules — Mon, 24 Sep 2007 16:42:35 +0000

Robert: Just would like to first suggest a correction to your first example: you have user-mane and user-name.

My preference is having the label element separate from the form control for CSS reasons. However, either way, I would use the for/id elements (matching properly of course, :-)) because without the for attribute, when you click on the label text, the option/control is not selected in IE whereas with the for attribute, the option/control is selected when you click on the label text.

By: Nick Webb

Nick Webb — Mon, 24 Sep 2007 16:33:44 +0000

I have to say that I disagree here. The form element is meaningless without the label so I fail to see why encapsulating the form element within the label could be seen as bad.

Perhaps the name “label” is what’s at fault. In actual fact the label element defines the form item and what it is the item is trying to capture. The form element really only provides the data format. In that context, it makes perfect sense to make the label element an integral, structural part of the form.

By: Scott Powers

Scott Powers — Mon, 24 Sep 2007 15:19:06 +0000

Sad to say I’ve never done much with the label element. Mostly out of ignorance I’m sure. Great post though Robert. Some good stuff you’ve got linked together here. Saving this one to snack on a bit later… or over and over again. Del.icio.us