WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: label element containing input element

for

From: Jared Smith
Date: Jul 1, 2011 8:51AM

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