E-mail List Archives
Thread: Checkbox Disclosure
Number of posts in this thread: 3 (In chronological order)
From: Robert Fentress
Date: Tue, Jan 05 2016 8:50AM
Subject: Checkbox Disclosure
No previous message | Next message →
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
From: Robert Fentress
Date: Tue, Jan 05 2016 10:53AM
Subject: Re: Checkbox Disclosure
← Previous message | Next message →
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 ADDRESS 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
From: David Farough
Date: Tue, Jan 05 2016 12:01PM
Subject: Re: Checkbox Disclosure
← Previous message | No next message
It seems to me that providing the description should be sufficient for
this, however, I would be careful with regard to the use of enabling the
checkbox. I would suggest that you use checking this option or
something similar instead.
In my view, the checkbox is enabled whether it is checked or not.
Keep in mind that the screen reader will be reporting the checked or
unchecked status of the control anyway. Providing the Expanded state is
only adding to the information being reported and may serve only to make
the interaction more verbose than necessary.
David Farough
Coordonnateur de l'accessibilité des applications, Services intégrés de
gestion des TI
Commission de la fonction publique du Canada / Gouvernement du Canada
= EMAIL ADDRESS REMOVED = Tél: 819-420-8418 Télécopieur :
819-420-8408
Application Accessibility Co-ordinator, Corporate IT Management
Public Service Commission of Canada / Government of Canada
= EMAIL ADDRESS REMOVED = Tel: 819-420-8418 / Fax: 819-420-8408
>>> Robert Fentress < = EMAIL ADDRESS REMOVED = > 12:53 PM Tuesday, January 05, 2016
>>>
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 ADDRESS 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
Ce courriel est destiné exclusivement au destinataire mentionné en titre
et peut contenir de l'information privilégiée, confidentielle ou
soustraite à la communication aux termes des lois applicables. Toute
divulgation non autorisée, toute reproduction ou réacheminement est
interdit. Si vous n'êtes pas le destinataire de ce courriel, ou n'êtes
pas autorisé par le destinataire visé, ou encore, si vous l'avez reçu
par erreur, veuillez le mentionner immédiatement à l'expéditeur et
supprimer le courriel et les copies.
This e-mail message is intended for the named recipient(s) and may
contain information that is privileged, confidential and/or exempt from
disclosure under applicable law. Unauthorized disclosure, copying or
re-transmission is prohibited. If you are not a named recipient or not
authorized by the named recipient(s), or if you have received this
e-mail in error, then please notify the sender immediately and delete
the message and any copies.