The off left technique is a better solution than display:none which, as Simon points out, most screen readers honor by not announcing it. See discussion at : http://css-discuss.incutio.com/?page=ScreenreaderVisibility

No js required, hiding labels can be solved with a little css.

label {

position:absolute;

left: -9999px;

}

That said, IMHO it is better for accessibility to leave the labels visible so you have a bigger target to hit with your mouse – clicking the label focusses the field which is good for people with motor disabilities.

Instead of getting the text by using labels(i).childNodes(0).nodeValue and parsing the string, why not use the title attribute of the label element, which “offers advisory information about the element for which it is set.” (WC3 Recommendation).

It seems the perfect fit, not only semantically correct, but

is certainly a less brittle implementation than

Does this make sense?

Great solution and very nice article :)

@gillbates: I’ve aluded to doing that in the last paragraph – a combination of CSS and DOM scripting to get it looking like a normal label, but retaining the semantic relationship that you get with fieldset/legend and contents. The DOM part could come it to hide the fieldset and legend (because they are such a bitch to style in CSS) and use the text found in the legend to create a new (easy-to-style) text element elsewhere. Am I making sense here? It’s early in the morning and I’ve yet to have a cup of coffee!

Just a quick question, why not use fieldset instead of label (maybe even styled as the rest of the form’s labels) in the case of a D.O.B. or other “multi-input inputs”?

Very nice article

I gotcha Ian, I re-read everything paying real attention and it became clear that you had already addressed this. I guess I must’ve missed my coffee when I read it =)

Cool. I’ve been making webforms for years. I had no idea how much of a noob I was. ;-)

Is the “for” attribute a defined attribute or is it something you just made up to work with your script ?

And what does the thisId = labels[i].htmlFor; do?

isn’t getAttribute supported by IE ?

Welcome to the dark side, Ian. You’ll like it here.

Russell: yes and no. for and class are two attributes IE does not play well with. To change the for attribute in IE, you need htmlFor and for class you need className. Most other browsers support get/setAttribute on for and class.

Now if you want to see something really screwy, check out how you need to work with IE on form elements you want to set a name on.

Labels are also extremely useful for radio buttons and checkboxes: You can click on the text enclosed by the label and check the item.

Labels, when assigned a width and floated, also make for an easy way to align form inputs. To see some of this in action check out this monstrous signup page I put together

“But why not just use display:none?”

Because display:none makes some screen readers ignore the content and not read it. This is a very nice way of doing it!

By the way, you might want to fix the tab order on this form, as tabbing from “http://” to the Message takes me to the logo at the top of the screen!