Re: Mark-up for radio button groups?

I am following up to my own question to make it more clear.

What do people recommend as a best practice for structuring a radio group? I use a heading, a list with the role of radiogroup, and then list items to hold each of the radio buttons in the group. There is also usually a paragraph of help text in-between the heading and the parent list.

I can’t use the fieldset and legend elements in my context. I am not building a forms, but rather an interactive described experience.

Additionally, I am wondering if it is a code to change the native role of “list” to role=“radiogroup.”

Again, users do not seem have a problem with this structure, but some WCAG accessibility checking tools, do.

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







On Sep 17, 2025, at 15:05, Taliesin Love Smith <Taliesin.Smith@Colorado.EDU> wrote:

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