SFCG Components

Radio Button Groups

⚠️ This page is still under construction

The Problem

I won't try to paraphrase what a WCAG 2.2 technique so plainly eloquent about checkbox and radio button inputs.

Grouping controls is most important for related radio buttons and checkboxes.

— H71: Providing a description for groups of form controls using fieldset and legend elements

I didn't understand the real impact of not doing this until very recently. I was navigating a webpage with VoiceOver (VO), and browser focus landed on a radio button (aka an <input> of type="radio"). There were 3 of these elements, all visually grouped together. VO claimed otherwise and told me there were six (not three) radio buttons in the group.

insert short video example

I went on to use my arrow keys to cycle through the radio buttons. Can you guess what happened when I pressed an arrow key on the third radio button? Browser focus did not cycle back to the first one. It actually jumped down to the bottom of the page.

Super confused, I opened up the Elements devtool panel and started inspecting the HTML. I confirmed the elements at the bottom of the page were radio buttons, but it still wasn't clear why or how these two sets were "connected."

I started running through debugging questions in my head.

  • Is the page wrapped in one big form element?
  • Are they missing a fieldset and/or legend?
  • Do they have labels and are they associated correctly?
  • Do they need to be grouped and does the group need a name?

That's where this page and its demos come in. I love debugging a juicy problem I've never encountered before. At times I can't let go of a puzzle until I've solved it. This was one of those times.

The Solution TL;DR

For groups of radio buttons to work with the arrow keys correctly, they all need to share the same name.

Note: I have currently only tested this with Chrome on macOS. The presence of a fieldset and legend may affect this functionality in other browsers. I currently do not plan on testing it because those elements are necessary for a radio group to be semantically correct.

1. No grouping, no name attributes

Output

Code

code block

2. Grouped with a div, no name attributes

Output

Code

code block

3. Grouped with a fieldset, no name attributes

Output

Code

code block

4. Grouped with a named fieldset (no names on inputs)

Output

Code

code block

5. No grouping, each radio with the same name

Output

Code

code block

6. Grouped with a fieldset, each radio with the same name

Output

Code

code block

7. Two fieldsets, radios in each have the same name

Output

First Favorite
Second Favorite

Code

code block