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: Julie Romanowski
Date: Nov 19, 2015 2:14PM

We need to remember that assistive technologies include hardware as well as software. We're not just talking about screen readers.

There are employees with mobility challenges at our company who use special types of ergonomic mice to access their computers. For example, one person uses a foot mouse (also called a slipper mouse) and another person uses a head mouse. Both of them have poor fine motor control and it's very difficult to impossible for them to click on small items such as radio buttons or check boxes. Coding the controls and their respective labels correctly using the id and for attributes provides a much larger area for these two people to click on, making selecting the controls much easier.

In the "Understanding Techniques for WCAG Success Criteria" documentation under "Sufficient Techniques" (http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/understanding-techniques.html#ut-understanding-techniques-sufficient-head) it states that "If web content implements the sufficient techniques for a given criterion correctly and it is accessibility-supported for the content's users, it conforms to that success criterion". Maybe I'm misunderstanding the WCAG 2.0 definition of accessibility support (http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-accessibility-supported-definition-head), but I take this to mean that using aria-labelledby to label radio buttons will fail SC 4.1.2 Name, Role, Value, as it isn't " accessibility-supported for the content's users" (the people using ergonomic mice as AT).

Thoughts?


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Paul Adam
Sent: Thursday, November 19, 2015 10:17 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Does WCAG require that when you click a label it checks the checkbox or radio button?

ARIA16 has no examples with radio buttons or checkboxes and the example that has a <label> includes the FOR/ID association to connected it to a <select> input. http://www.w3.org/TR/WCAG20-TECHS/ARIA16.html

I've not found any examples in WCAG's docs that show radio button or checkboxes without clickable labels.

Techniques are all informative, the normative part says "Info and Relationships" are required for 1.3.1 to me that requires a programmatic relationship not just an accessible name.

Paul J. Adam
Accessibility Evangelist
www.deque.com<;http://www.deque.com>;

> On Nov 19, 2015, at 8:14 AM, Sailesh Panchang < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >> wrote:
>
> 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