WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jonathan Avila
Date: Nov 18, 2015 8:34PM


> 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


-----Original Message-----
From: WebAIM-Forum [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>

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

Success Criteria WebAIM's Recommendations
1.3.1 Info and Relationships <http://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic>;
(Level A)
Semantic markup <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>; 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