WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Paul J. Adam
Date: Nov 18, 2015 1:48PM

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