WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Checkbox Disclosure

for

From: Robert Fentress
Date: Jan 5, 2016 10:53AM

Well, it looks like aria-expanded on the checkbox is not conformant, based
on this:
http://www.w3.org/TR/wai-aria-1.1/#checkbox

Also, I misspoke when I said "it works" on Mac OS X/VoiceOver, in that the
expanded state is not voiced there (though it is on iOS).

It is disappointing that this is not conformant, because I think it does
probably provide some value to know that it is expanded. However, I guess,
with the description and the checked state, you could view it as
redundant. You folks agree that aria-expanded should be removed, even
though it is voiced by most screen readers?

Best,
Rob

On Tue, Jan 5, 2016 at 10:50 AM, Robert Fentress < <EMAIL REMOVED> > wrote:

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



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