WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: label element containing input element

for

From: Steve Faulkner
Date: Jul 4, 2011 12:57PM

Hi Jared, decided to do some testing after reading this thread:

HTML5 Accessibility Chops: form control labeling
http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-control-labeling/

regards
Stevef

On 1 July 2011 15:52, Jared Smith < <EMAIL REMOVED> > wrote:

> 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
>