Test case for radio buttons should not use list markup

[rmleg]

Hi! I love this resource you've created! I was checking out your test case for radio buttons (group) and I noticed you said Chrome and Firefox with VoiceOver do not read the legend. I was surprised because that has not been my experience.

I don't think it is semantically correct to include radio buttons in a list, which is I think what causes the unexpected behavior. If you try it with markup like this, legend is read in Chrome and Firefox:

<fieldset>
  <legend>Do you like boats?</legend>
  <input type="radio" id="boats-y" name="boats">
  <label for="boats-y">Yes</label><br />
  <input type="radio" id="boats-n" name="boats">
  <label for="boats-n">No</label>
</fieldset>

Would you like a PR with this change and updated readouts for Chrome and Firefox? I can also provide updated readouts for VoiceOver Chrome/Firefox/Safari and NVDA Chrome/Firefox/Edge, but I don't have access to JAWS to help with those.

[russmaxdesign]

Hey Rachel,

Thank you very much for raising this. I've added two new test cases, removing the lists inside the fieldsets:

https://russmaxdesign.github.io/accessible-forms/01-input-radio-group-without-list.html

https://russmaxdesign.github.io/accessible-forms/07-nested-fieldset-without-list.html

As you have said, the relevant legends are announced better using this method. In the case of the nested fieldsets, only the innner legends are announced.

I would like to tweet these two updates today and give you credit at your handle if ok: https://twitter.com/rleggos

One thing I would push back on slightly: I think it is an acceptable solution to use lists for radio groups, from a semantic perspectives. Fundamentally, I see radio groups and checkbox groups as lists of options. Regardless, this is personal opinion, and there is definite evidence that Voiceover support is far better when they are NOT housed in lists. :)

Thanks again!
Russ

[rmleg]

I think you're probably right that it is a matter of personal preference whether to include list markup in a group of radio buttons or checkboxes. My thinking is if radio buttons are already grouped by using the name attribute correctly, and further by using fieldset/legend to provide a group label, they don't also need to be a list. E.g. should they really show up in both the form and list pages in the VO rotor?

Anyway, that's just my two cents. :) Thanks for adding those test cases and thanks again for this great resource! I've referenced it several times since someone I work with shared it on Teams last week.