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: Paul Adam
Date: Nov 19, 2015 9:09AM

H65 has no examples with radio buttons or checkboxes. I can't find any examples in WCAG's documentation that show a radio button or checkout without a clickable label.

H65: Using the title attribute to identify form controls when the label element cannot be used

In my examples the visible <label> can can be used and if not the developer can use an aria-labelledby string reference and JavaScript to make a "faux" label that would check the checkbox.

I think WCAG does require you emulate the native behavior of a checkbox with a clickable label if you were to make an ARIA checkbox.

I also think if you use role=button you're required to make it work with the spacebar key like a native <button> element but maybe I'm wrong there too! ;)

Paul J. Adam
Accessibility Evangelist
www.deque.com

> On Nov 18, 2015, at 9:34 PM, 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 <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> <mailto: <EMAIL REMOVED> >
>
> 703-637-8957 (o)
> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>
>
>