E-mail List Archives
Thread: is grouping checkboxes using radiogroup permisible?
Number of posts in this thread: 11 (In chronological order)
From: David Farough
Date: Wed, Jul 06 2022 10:01AM
Subject: is grouping checkboxes using radiogroup permisible?
No previous message | Next message →
We have the following situation:
In a user profile, we have a group of radiobuttons which asks whether you are part of an employment equity group.
Options are yes, No and prefer not to say.
If yes is chosen a list of possible options (Checkboxes is displayed.
Would using the radiogroup with the checkboxes be a good option to handle this in order to minimize the repetition of the group label?
Is there a better solution?
Thanks
From: Birkir R. Gunnarsson
Date: Wed, Jul 06 2022 10:58AM
Subject: Re: is grouping checkboxes using radiogroup permisible?
← Previous message | Next message →
You can have nested fieldset elements, yes.
You can even group the checkboxes in a fieldset and add
aria-label="something descriptive as a group label" if you don't need
a nested <legend> with visible text.
Just make sure that group comes after the radio buttons, not between
the yes and the no, in content/focus order, it could potentially
create a lot of confusion.
On 7/6/22, David Farough < = EMAIL ADDRESS REMOVED = > wrote:
> We have the following situation:
> In a user profile, we have a group of radiobuttons which asks whether you
> are part of an employment equity group.
> Options are yes, No and prefer not to say.
> If yes is chosen a list of possible options (Checkboxes is displayed.
> Would using the radiogroup with the checkboxes be a good option to handle
> this in order to minimize the repetition of the group label?
> Is there a better solution?
> Thanks
> > > > >
--
Work hard. Have fun. Make history.
From: Mark Magennis
Date: Wed, Jul 06 2022 11:14AM
Subject: Re: is grouping checkboxes using radiogroup permisible?
← Previous message | Next message →
HI Birkir. I imagined that David was probably envisaging placing the checkboxes immediately between the yes and no radio buttons which would be a logical design visually. But what potential confusion do you think this could cause? Is it that it might be difficult to keep track of where you are in the nesting?
Mark
From: Birkir R. Gunnarsson
Date: Wed, Jul 06 2022 12:28PM
Subject: Re: is grouping checkboxes using radiogroup permisible?
← Previous message | Next message →
Yes, pressing the arrow keys to navigate between the radiobuttons will
skip right past the checkboxes (and make them disappear if you switch
from "yes" to "no").
At least I would warn the screen reader user that selecting "yes"
result in additional checkboxes being displayed between the yes and no
radio buttons.
With a sufficient warning this is ok, but it is a confusing situation
when the experience is linearized.
On 7/6/22, Mark Magennis < = EMAIL ADDRESS REMOVED = > wrote:
> HI Birkir. I imagined that David was probably envisaging placing the
> checkboxes immediately between the yes and no radio buttons which would be a
> logical design visually. But what potential confusion do you think this
> could cause? Is it that it might be difficult to keep track of where you are
> in the nesting?
>
> Mark
>
>
From: Mark Magennis
Date: Thu, Jul 07 2022 1:35AM
Subject: Re: is grouping checkboxes using radiogrouppermisible?
← Previous message | Next message →
I'm still not sure I get it Birkir. The checkboxes are only of interest when you select Yes so if you select the No radio button it doesn't seem to be important to know that the checkboxes were there when Yes was selected but are no longer there. They're simply not relevant to you. And I don't see why it would be important, or even helpful, to tell the user in advance that if they select Yes some more checkboxes will appear. If they do select Yes then they the checkboxes will be the next question they come across, in the same way that if they had selected No the next question would be a different one. Am I missing something in the experience?
From: Brooks Newton
Date: Thu, Jul 07 2022 9:04AM
Subject: Re: is grouping checkboxes using radiogroup permisible?
← Previous message | Next message →
Hi Mark,
What is the expected user experience when an assistive technology user
encounters a radio group?
My thought is that the expectation is that, without additional instruction,
each radio group will contain mutually exclusive choices which are
navigable by pressing the arrow keys. There will be no expectation of
embedded content within the radio group itself that is dependent upon which
radio button happens to be currently selected. The native semantics of
radio groups, and correspondingly, the way that user agents paired with
assistive technology announce the radio button groups do not provide
programmatically available details associated with the embedded content
that is contingent on the current radio button selection.
Now, of course, if you can see the page as you arrow through the radio
group choices you'll see that some choices come with extra choices. That's
great if you can see the whole page and get the gist of what's happening
onscreen when you select various radio buttons . Being aware of these
contingencies provides sighted users with the privilege of making an
informed choice as to which of the radio button choices is the one they
want to make.
If you can't see those contingent, embedded choices pop up onscreen as you
navigate through the radio button group, then you miss out on that
additional information which could help you make the right radio button
choices. That's just my take. I'd love to hear what Birkir and others
think.
Sorry if I haven't replied properly to this thread. I'm just using GMail
and hitting reply. If there's a better way to respond to the list, please
provide those details in the instructions for the Listserv. Or, I guess we
can just assume that everyone "gets" the intended interaction without
explicit instructions and see how that goes. Isn't it just easier for
everyone to have a brief bit of instructive text?
Brooks
On Thu, Jul 7, 2022 at 2:36 AM Mark Magennis < = EMAIL ADDRESS REMOVED = >
wrote:
> I'm still not sure I get it Birkir. The checkboxes are only of interest
> when you select Yes so if you select the No radio button it doesn't seem to
> be important to know that the checkboxes were there when Yes was selected
> but are no longer there. They're simply not relevant to you. And I don't
> see why it would be important, or even helpful, to tell the user in advance
> that if they select Yes some more checkboxes will appear. If they do select
> Yes then they the checkboxes will be the next question they come across, in
> the same way that if they had selected No the next question would be a
> different one. Am I missing something in the experience?
>
>
From: wolfgang.berndorfer
Date: Thu, Jul 07 2022 10:36AM
Subject: Re: is grouping checkboxes using radiogrouppermisible?
← Previous message | Next message →
Would steps be an option?
Step 1: Options Yes, No and prefer not to say
Step 2a: If yes is chosen a list of possible options (Checkboxes is displayed.
Step 2b: Else go directly to step 3.
Step 3: Next form component.
From: glen walker
Date: Thu, Jul 07 2022 7:02PM
Subject: Re: is grouping checkboxes using radiogroup permisible?
← Previous message | Next message →
Well said, Brooks.
On Thu, Jul 7, 2022 at 9:05 AM Brooks Newton < = EMAIL ADDRESS REMOVED = >
wrote:
>
> What is the expected user experience when an assistive technology user
> encounters a radio group?
>
>
>
From: Birkir R. Gunnarsson
Date: Thu, Jul 07 2022 7:25PM
Subject: Re: is grouping checkboxes using radiogroup permisible?
← Previous message | Next message →
This is why I campaigned hard for allowing aria-expanded attribute on
checkboxes and radio buttons back in my ARIA working group days, my
proposal was overturned, without a good explanation.
Here's another screen reader scenario, which is at least plausible if
not likely.
Screen reader typically switch to auto forms mode when they hit radio
buttons (i.e. arrow key presses are passed to the browser), for
checkboxes they typically do not.
Scenario, user selects "yes"
Now user tabs to the checkbox group (screen reader switches to browse mode)
User uses arrow keys to navigate the checkbox group, spacebar to
select desired options.]Last Pressing arrow down from the last
checkbox gets the user to the "no" radio button, screen reader
switches back into forms mode.
Now if user is not careful they will press arrow down again and hit
the "I don't know" button.
Unless the browser remembers which checkboxes were checked, now the
user has lost that information by accident and has to repeat.
It's not a guarnteed scenario but realistic.
There is one good news .. you can likely use the aria-owns attribute
to hack the screen reader content order so that the checkbox group is
presented after the radio buttons in screen reader content order.
It's a bit messy and may not work with all combinations, butit could be done.
Or, you know, just warn a screen reader user about the setup with a
line of text attached to the yes radio button, it would be sufficient.
On 7/7/22, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> Well said, Brooks.
>
>
> On Thu, Jul 7, 2022 at 9:05 AM Brooks Newton < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>>
>> What is the expected user experience when an assistive technology user
>> encounters a radio group?
>>
>>
>>
> > > > >
--
Work hard. Have fun. Make history.
From: Mark Magennis
Date: Fri, Jul 08 2022 3:07AM
Subject: Re: is grouping checkboxes using radiogrouppermisible?
← Previous message | Next message →
Thanks for your well thought out reply Brooks. However, I don't think I agree with you. As far as I can see, when you embed a checkbox group within a radio button group the radio group will work as normal and you won't even know that there is any embedding. The experience will be identical to that when the checkbox group is added after the radio button group, with one small exception which I'll describe later. I don't see either of these scenarios as a problem.
If you enter the radio button group and don't select one, it works as normal because the checkbox group isn't there. If you select a radio button and arrow through the group it also works as normal. Even when you arrow to the Yes radio button and the checkbox group appears, the radio button group still works as normal. When you tab out of the radio button group you get to the checkbox group, if you had selected Yes and it is there. The checkbox group works as normal. If you tab back to the radio button group, it works as normal.
It's the same as if the question with the checkbox group was placed after the question with the radio button group on the form. The behavior is identical in each case, with one small exception. In JAWS/Chrome and NVDA/Firefox (but not VoiceOver/Safari) when you reverse tab into the checkbox group, if it is embedded within the radio button group, the screen reader reads both group labels, i.e. both questions. But this probably makes sense because one question is the context for the other. Visually, I think it is also probably better that the checkbox group is embedded in the radio button group because, again, this shows that one question is within the context of the other as a dependent question or sub-question.
As far as I can see, the only issue with doing this is whether there is any difficulty arising from dynamically adding conditional supplementary questions to the form at all. That is, questions that you don't know about in advance. I'm not sure that this can be viewed as an accessibility issue though, and I don't see it as a usability issue either. It's pretty normal with forms to have questions that you have to complete or not dependent on your answers to other questions. Consider common paper forms like a national census form. Unlike our web form scenario here, these show all of the possible questions up front and many of them are co-dependent, such as "do you have any dependents?" and if you answer Yes you are directed to answer all the questions about dependents. Even in this case where all of the questions are already on the form you don't know how many you will have to fill in before you start. This seems to be an unavoidable feature of the information space.
My observations for a checkbox group embedded within a radio button group are based on testing with the following code. Note that in this code the checkbox question is permanently embedded because it would take me ages to figure out the javascript to show/hide it. But this is good enough for testing. I may be missing something here, but really I don't see a problem. Please gently correctly me if I'm wrong but I think this meets all of the expectations you gave for a radio group because you don't even know it is embedded.
<h1>Checkboxes within radiogroup</h1>
<fieldset>
<legend>Do you play sports?</legend>
<label><input type="radio" name="theoptions">Yes</input></label>
<fieldset>
<legend>Which sports do you play?</legend>
<label><input type="checkbox">hockey</input></label>
<label><input type="checkbox">handball</input></label>
<label><input type="checkbox">tennis</input></label>
</fieldset>
<label><input type="radio" name="theoptions">No</input></label>
<label><input type="radio" name="theoptions">Prefer not to say</input></label>
</fieldset>
From: Mark Magennis
Date: Fri, Jul 08 2022 3:15AM
Subject: Re: is grouping checkboxes using radiogrouppermisible?
← Previous message | No next message
Thanks for that scenario Birkir. This is just the information I was looking for. I was assuming tabbing through the ckeckboxes. Bad to assume things like this I know. Slap on the wrist for me.
Yes if you arrow from the last checkbox you get to the No radio button. As you say, this is a realistic scenario in which the embedding causes a real problem.
But rather than using an aria-owns hack which sounds inherently unreliable, would it be better to add the checkbox group after the radio button group and achieve the visual embedding using CSS?
Mark