WebAIM - Web Accessibility In Mind

E-mail List Archives

Checkbox Disclosure

for

From: Robert Fentress
Date: Jan 5, 2016 8:50AM

Hello, all.

Increasingly, I run across situations where developers cause options to
appear dynamically on a page in response to a user checking a checkbox.
These can usually, but not always, be viewed as sub-options, of the main
checkbox. I've been doing some research, pondering, and tinkering, and
wonder if I could get some feedback on the solution I've come up with
before I make a recommendation about this to someone else.

Basically, the approach I've taken is to do the following:

- Add an aria-describedby attribute to the checkbox pointing to a hidden
div that says "Enabling checkbox reveals additional options."
- In cases where the sub-options appear directly below the checkbox, add
an aria-expanded attribute to the checkbox.
- There is a div with role='group' and I put both the checkbox and
revealed content in that.

I've created a pen at codepen.io for it, which you can access here:
http://codepen.io/robfentress/pen/mVRoVx

What do you think? Is this overkill? Should I just assume that users will
encounter content below the checkbox and avoid the extra verbosity of the
description? Are there semantic problems with adding aria-expanded to a
checkbox (it works)? What about cases where the content that appears is
in different places on the page (this sometimes happens). I've so far
chosen not to use aria-controls, since the element being controlled
disappears and support for this attribute is poor anyway. Should I?
Anything else I should add?

I've tested the code, and it seems to work okay in IE with JAWS 16, and the
latest version of NVDA. It also works with Safari in the latest versions of
Mac OS X/VoiceOver, and iOS/VoiceOver.

Thanks, as always for your wise counsel!

Best,
Rob

--
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255

Technology-enhanced Learning & Online Strategies
Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061