WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Does WCAG require that when you click a label it checks the checkbox or radio button?

for

From: Sailesh Panchang
Date: Nov 19, 2015 7:14AM

ARIA16 (aria-labelledby) notes: "Clicking on a label focuses the
associated form field. This does not occur with aria-labelledby. If
this behaviour is required then use label or implement this
functionality using scripting".
I do note that ARIA16 is called 'Using aria-labelledby to provide a
name for user interface controls' i.e. for 4.1.2 but it is listed as
sufficient for 1.3.1 too.
So a div role=checkbox and aria-labelledby= xxx> type of control, will
pass WCAG2 (including 1.3.1)  even if  clicking label does not
activate the checkbox on that platform.
It was clear in HTML4: When a  LABEL  element receives  focus, it
passes the focus on to its associated control. This is a UA function.
Unfortunately WCAG2 does not mandate this label functionality.
If I am interpreting this right, in HTML5 it says: the UA should match
the platform's label behavior. The default activation  behavior for a
label is to do nothing.
And even on a platform where the label moves focus to the control, no
WCAG2 SC requires this.
So an accessibility feature built in to browser functionality is being
watered down or not given due respect even though it helps a group of
users.
Unfortunately therefore, one cannot call a 'fail' when a form control
with a visible label relies on title / aria-label / aria-labelledby
to convey purpose of control instead of the HTML LABEL element
implicitly or with explicit association.

Best regards,
Sailesh Panchang


On 11/18/15, Jonathan Avila < <EMAIL REMOVED> > wrote:
>> It seems most people are saying that it's only a "Best Practice" that when
>> you click a label for a checkbox or radio button that the box gets
>> checked.
>
> Yes, that is how I read WCAG 2. There are techniques such as H65 that are
> deemed sufficient to meet SC 1.3.1
> (http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H65) While the text
> of H65 implies it's only for situations where there can't be text associated
> visually, however, the check in the technique does not mandate this.
>
> Keep in mind the following:
> * aria-labelledby can be used to associate labels and form fields but
> browsers do not support the user clicking/touching the label to focus/check
> the field. So you have a case where the technical criteria is met but the
> functional benefits are not attained.
> * SC 3.3.2 Labels and Instructions does require that visual labels be
> present. So a visual label is always needed -- although labels don't have
> to be text -- they could be icons or other controls and they don't have to
> be associated programmatically. On a related note the programmatic name and
> label should match to support users of speech recognition.
>
> Jonathan
> --
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> <EMAIL REMOVED>
>
> 703-637-8957 (o)
> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>
>
>