WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: is grouping checkboxes using radiogrouppermisible?

for

From: Mark Magennis
Date: Jul 8, 2022 3:07AM

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>