Group Controls

title: "Group Controls — Accessible Radio Buttons, Checkboxes, and Selects" description: "Learn how to make radio groups, checkbox sets, and custom select widgets accessible with proper labeling, keyboard navigation, and ARIA roles." weight: 13 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, forms]

Radio buttons, checkboxes, and select elements must be properly grouped, labeled, and keyboard-navigable to be accessible for all users.

## What You'll Learn

How to build accessible radio groups, checkbox groups, and custom select widgets with proper ARIA roles and keyboard interaction.

## Why It Matters

Grouped controls share a common purpose. Users need context from the group label, and keyboard navigation must allow arrow keys within the group.

## Real-World Use

A survey form has radio buttons for "How did you hear about us?" with options like Social Media, Email, Friend. The user tabs to the group and uses arrow keys to navigate between options. The screen reader announces the group legend before each option.

## Radio Group with Fieldset

```html
<fieldset>
  <legend>How did you hear about us?</legend>

  <input type="radio" id="social" name="referral" value="social">
  <label for="social">Social media</label>

  <input type="radio" id="email" name="referral" value="email">
  <label for="email">Email</label>

  <input type="radio" id="friend" name="referral" value="friend">
  <label for="friend">Friend or colleague</label>
</fieldset>

Checkbox Group

<fieldset>
  <legend>Which topics interest you?</legend>

  <input type="checkbox" id="topic-tech" name="topics" value="tech">
  <label for="topic-tech">Technology</label>

  <input type="checkbox" id="topic-science" name="topics" value="science">
  <label for="topic-science">Science</label>

  <input type="checkbox" id="topic-art" name="topics" value="art">
  <label for="topic-art">Art & Design</label>
</fieldset>

Custom Select with ARIA

<div role="combobox" aria-expanded="false" aria-haspopup="listbox"
     aria-labelledby="country-label" tabindex="0"
     id="country-combo">
  <span id="country-selected">Select country</span>
</div>
<ul role="listbox" aria-labelledby="country-label" id="country-list">
  <li role="option" aria-selected="false" tabindex="-1">United States</li>
  <li role="option" aria-selected="false" tabindex="-1">Canada</li>
  <li role="option" aria-selected="false" tabindex="-1">Mexico</li>
</ul>

Common Mistakes

1. Radio buttons not grouped by name

Radio buttons with different name values are independent. Use the same name to group them.

2. No fieldset for radio/checkbox groups

Without fieldset, screen reader users hear each option without context of the group purpose.

3. Custom select without keyboard support

Custom dropdowns often break arrow key navigation, Enter to select, and Escape to close.

4. Missing aria-selected on custom options

Custom options need aria-selected="true/false" to communicate selection to screen readers.

5. Checkboxes that navigate on change

A checkbox that triggers navigation on change can disorient screen reader users.

Practice Questions

1. How do you group radio buttons for screen readers? Use fieldset with a legend that describes the group purpose.

2. What ARIA role does a custom dropdown need? role="combobox" on the trigger and role="listbox" with role="option" children.

3. How should keyboard navigation work in a radio group? Tab enters the group from the currently selected option. Arrow keys move between options. Tab exits the group.

Challenge: Create a custom select component that uses ARIA roles, manages aria-expanded, and supports keyboard navigation (arrow keys, Enter, Escape).

FAQ

Mini Project

Build a product customization form with three radio groups (size, color, quantity) and two checkbox groups (extras, preferences). Use fieldset and legend for each group. Test keyboard navigation.

What's Next

Now use the Form Tester to audit and verify that your forms meet accessibility standards before deploying them.