Mark-up for radio button groups?

Hi folks,

Ten years again, I thought it was a good practice to use a heading (appropriate level) to name a radiogroup and then use a UL with a role of radiogroup, and then to wrap the radio buttons within list items?

I have not had any blind learners in interviews have trouble with this pattern.

I have noticed that screen reader software varies on whether or not they count the items (1 of 4, 2, of 4, etc), but other than that this pattern seems to work nicely, and it is simple, and the heading provides a navigable sign post for finding the buttons in addition to using Tab navigation or some other interactive navigation method.

For example, the following interactive simulation, Molecules and Light<https://phet.colorado.edu/sims/html/molecules-and-light/latest/molecules-and-light_all.html>, has 3 radio groups, one for the Light Sources, one for the Molecules and one for the Sim Speeds.

The markup looks like this:


<h3>Light Sources<h3/>

<p>Choose light source for observation window ordered low to high energy.</p>

<ul role="radiogroup">
  <li>
    <input
        id="button-1"
        type="radio"
        name="RectangularRadioButtonGroup1">
    <label for="button-1">Microwave</label>
  </li>
  <li>
    <input
        id="button-2"
        type="radio"
        name="RectangularRadioButtonGroup1">
    <label for="button-2">Infrared</label>
  </li>
  <li>
    <input
        id="button-3"
        type="radio"
        name="RectangularRadioButtonGroup1">
    <label for="button-3">Visible</label>
  </li>
  <li>
    <input
        id="button-4"
        type="radio"
        name="RectangularRadioButtonGroup1">
    <label for="button-4">Ultraviolet</label>
  </li>
</ul>

Any opinions on the accessibility of this pattern?

Best,

Taliesin

~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~
Taliesin L. Smith
taliesin.smith@colorado.edu

Inclusive Design Research Specialist
PhET Interactive Simulations
http://phet.colorado.edu/
Department of Physics
University of Colorado, Boulder