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: Lucy Greco
Date: Nov 18, 2015 2:17PM

lets drop the spec and every thing else and think of this in a reel life
case
a low vision user sees the label only and is not able to find the check
box it self being referred to yes this fails if that person can't click
the only thing they can see that refers to the item they want. let stop
getting stuck on the spec and say does this work yay or nay and i say nay


On Wed, Nov 18, 2015 at 1:13 PM, Patrick H. Lauke < <EMAIL REMOVED> >
wrote:

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



--
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces