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: Sailesh Panchang
Date: Nov 19, 2015 7:14AM


ARIA16 (aria-labelledby) notes: "Clicking on a label focuses the
associated form field. This does not occur with aria-labelledby. If
this behaviour is required then use label or implement this
functionality using scripting".
I do note that ARIA16 is called 'Using aria-labelledby to provide a
name for user interface controls' i.e. for 4.1.2 but it is listed as
sufficient for 1.3.1 too.
So a div role=checkbox and aria-labelledby= xxx> type of control, will
pass WCAG2 (including 1.3.1)  even if  clicking label does not
activate the checkbox on that platform.
It was clear in HTML4: When a  LABEL  element receives  focus, it
passes the focus on to its associated control. This is a UA function.
Unfortunately WCAG2 does not mandate this label functionality.
If I am interpreting this right, in HTML5 it says: the UA should match
the platform's label behavior. The default activation  behavior for a
label is to do nothing.
And even on a platform where the label moves focus to the control, no
WCAG2 SC requires this.
So an accessibility feature built in to browser functionality is being
watered down or not given due respect even though it helps a group of
users.
Unfortunately therefore, one cannot call a 'fail' when a form control
with a visible label relies on title / aria-label / aria-labelledby
to convey purpose of control instead of the HTML LABEL element
implicitly or with explicit association.

Best regards,
Sailesh Panchang


On 11/18/15, Jonathan Avila < <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.
>
> 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
>
> > > http://webaim.org/discussion/archives
> > > > > >