WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: label element containing input element

for

From: steven
Date: Jul 1, 2011 9:33AM

Jared, I agree that "placing the form control within the label element" is
semantic nonsense, but so long as HTML/5 continues to places tags in tags
(there seems to be no getting away from placing links within paragraphs for
example), I actually prefer for form elements to be within labels simply
because there is very good support for it as such (and I strongly believe
true accessibility is as much about backwards compatibility as it is about
future compatibility - long live plain text files).

I personally would love nothing more than for browsers to handle truely
semantic content and actually see web pages move controls and navigation
into the browser itself (or even be moved into a non-content layer) but
looking at the short steps HTML5 has made since XHTML I don't see there
being a big hurry for this. We're still wrapping and duplicating content
(albeit with more semantically named tags), mixing content with function
(why oh why do we still place menus and links within a document!?) ... we
haven't learned much in my opinion with HTML5 as we're still delivering more
than the content that is required in most cases and that is the
responsibility of habit I guess.

Thanks for the tip about the for/id too ... I must investigate that some
more.

Steven



-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Jared Smith
Sent: 01 July 2011 15:52
To: WebAIM Discussion List
Subject: Re: [WebAIM] label element containing input element

On Fri, Jul 1, 2011 at 8:12 AM, Neier, Garrett < <EMAIL REMOVED> > wrote:
> Hi All,
> 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?

Most screen readers properly handle implicit labeling (placing the
form control within the label element). I've always been a bit
uncomfortable with this because it's semantic nonsense - the control
is part of the label for itself? Nothing else in HTML works like this.

At one point the W3C recommended against implicit labeling, but now I
see that it is the standard format in HTML5.

Using explicit (matching for/id attribute values) is a bit more
bulletproof - it works even if the form controls are not adjacent or
if they are moved around in markup. It avoids all possible ambiguity
as to which label goes with which control.

What you must avoid is using for/id AND wrapping the form control. For
some reason most screen readers do not make any association in this
case.

Jared Smith
WebAIM.org