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
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >] On Behalf Of Paul J. Adam
> Sent: Wednesday, November 18, 2015 3:49 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Does WCAG require that when you click a label it checks the checkbox or radio button?
>
> 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.
>
> My argument is that if you don't make the label check the box then you're failing WCAG's info and relationships requirement.
>
> As an example see this demo on creating an ARIA checkbox:
>
> https://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-checkbox.html <https://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-checkbox.html><https://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-checkbox.html <https://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-checkbox.html>>
>
> Standard checkbox coding with FOR/ID looks like this:
>
> <input id="signup" type="checkbox" />
> <label for="signup">Sign me up!</label>
>
> When you click the label "Sign me up!" it checks the box.
>
> I'm hearing from most people that the use of a title attribute as an accessible name on a checkbox without a clickable label passes WCAG and the label connection is not required.
>
> So the code is WCAG Compliant?
> <input title="Sign me up!" type="checkbox" /> <label>Sign me up!</label>
>
> There have been other experts who said they'd consider it a failure so maybe I'm not crazy? ;)
>
> I see that WebAIM's checklist reads about 1.3.1:
> http://webaim.org/standards/wcag/checklist <http://webaim.org/standards/wcag/checklist>; <http://webaim.org/standards/wcag/checklist <http://webaim.org/standards/wcag/checklist>;>
>
> Success Criteria WebAIM's Recommendations
> 1.3.1 Info and Relationships <http://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic <http://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic>;>
> (Level A)
> Semantic markup <http://webaim.org/techniques/semanticstructure/ <http://webaim.org/techniques/semanticstructure/>;> is used to designate headings (<h1>), lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, for example), etc. Semantic markup is used appropriately.
> Tables <http://webaim.org/techniques/tables/data <http://webaim.org/techniques/tables/data>;> are used for tabular data. Where necessary, data cells are associated with their headers. Data table captions and summaries are used where appropriate.
> Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend.
> "Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend."
>
> What's the WebAIM definition of "associated"? My definition is that when you click the label it checks the checkbox :)
>
> What are your thoughts?
>
> Thanks!
>
> Paul J. Adam
> Accessibility Evangelist
> www.deque.com
>
> > > > > > >