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: Moore,Michael (Accessibility) (HHSC)
Date: Nov 18, 2015 6:23PM

I think that this is another example of what happens when we attempt to test in accessibility rather than design for accessibility. I have been involved in more projects than I care to remember where the last step before release is the accessibility audit. Problems found at this point tend to result in blown schedules and costly repairs. In that situation, I would be more likely to pass 1.3.1 since the use of a span does not convey any incorrect structure. I would also include a note that the use of title in that instance is not best practice and should be corrected in conjunction with a future update. I would also request that design specifications/style guide/coding guide be updated to require that visible labels use the label element and the for attribute.

The example below actually demonstrates two accessibility problems that could have been avoided if the design and development teams included accessibility SMEs. If someone using a screen magnifier cannot find the checkbox beside the label there is likely way to much white space between the label and the checkbox. Using the label element rather than the title to bind the accessible name to the checkbox and increase the click area provides better usability for mouse users and support for people using screen readers.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)