WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: label element containing input element

for

From: David Dorward
Date: Jul 1, 2011 9:45AM

On 1 Jul 2011, at 15:12, Neier, Garrett wrote:
> This issue was last discussed in 2003. The advice then was to separate the <label> from the form element.
> Today, it appears that the technique of enclosing the form element in the <label> is more widely used and part of the spec.
> Does anyone know if today's screen readers can handle it?

As far as I know, the problem was (and still is) Internet Explorer 6, not screen readers themselves.

> I ask because I would like to create the cleanest html, without resorting to <br> tags between elements.
> The only example I found, without <br> tags, has <label> containing the element
> http://www.themaninblue.com/experiment/InForm/margin.htm

There is no reason the control has to be inside the label for that. You get most of the effect with a simple:

label {
float: left;
clear: left;
width: <length>
}

But that, and the example you found, suffers badly if CSS is not available, so I would still add some markup that would render new lines by default (wrapping label/control pairs in divs usually).

--
David Dorward
http://dorward.me.uk