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: Sean Curtis
Date: Nov 18, 2015 2:10PM

I think you're right — the label is actually the thing that fails here. It isn't associated with the required element.

From a purely UX perspective I'd reject whatever pull request that code was on.

Cheers,

Sean

> On 19 Nov 2015, at 7:48 AM, Paul J. Adam < <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.
>
> 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
>
> > > >