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: Patrick H. Lauke
Date: Nov 18, 2015 2:13PM

On 18/11/2015 20:48, Paul J. Adam 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?

Note that the actual wording of the WCAG SC does not mention anything
specific about "associated".

"1.3.1 Info and Relationships: Information, structure, and relationships
conveyed through presentation can be programmatically determined or are
available in text. (Level A)"

and, per the "Understanding..." doc
http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html

"The intent of this Success Criterion is to ensure that information and
relationships that are implied by visual or auditory formatting are
preserved when the presentation format changes."

Now, we can have a philosophical, hair-splitting discussion about
whether (for whatever reason) not marking up visible label text as a
<label>, and instead injecting it some other way (e.g. with aria-label,
or title, or some other method that takes part in the accessible name
algorithm) is a way of "programmatically determining" (though
duplicating) the relationship or not, and whether this would (in an
unnecessarily convoluted way, granted) "preserve" the info/relationship.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke