Web Accessibility: How to Properly Label Radio Button and Checkbox Groups?

When building forms, have you ever been unsure how to handle labels for radio button and checkbox groups? In particular, you may struggle with how to label the group as a whole and how to handle the for attribute.

This article organizes how to label these groups and introduces specific methods for doing so.

Common Approaches and Their Issues

Pointing for to the First Item

This method points the for attribute of the group's <label>label to the first item in a radio button or checkbox group.

For example, consider the following code.

<div class="form-group">
  <label for="fruit-apple">好きな果物</label>
  <div>
    <label><input type="radio" id="fruit-apple" name="fruit" value="apple">りんご</label>
    <label><input type="radio" name="fruit" value="orange">みかん</label>
    <label><input type="radio" name="fruit" value="banana">バナナ</label>
  </div>
</div>

It may look fine visually, but with screen readers, the label "Favorite Fruit" is associated only with the first radio button, so the group is not correctly recognized as a whole.

Not specifying for

<div class="form-group">
  <label>好きな果物</label>
  <div>
    <label><input type="radio" name="fruit" value="apple">りんご</label>
    <label><input type="radio" name="fruit" value="orange">みかん</label>
    <label><input type="radio" name="fruit" value="banana">バナナ</label>
  </div>
</div>

With this approach, it is unclear which element the label is associated with. This is especially problematic for users of screen readers, as it becomes unclear which options the label applies to.

Here is a suggested improvement

Group the elements using the role attribute and label them with aria-labelledby

Group radio buttons and checkboxes using role="radiogroup" or role="group", and associate them with a label element identified by an ID through aria-labelledby. This makes it clear to screen readers that the label "Favorite fruit" applies to the entire group.

Radio button

<div class="form-group">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div role="radiogroup" aria-labelledby="fruit-group">
      <label><input type="radio" name="fruit" value="apple">りんご</label>
      <label><input type="radio" name="fruit" value="orange">みかん</label>
      <label><input type="radio" name="fruit" value="banana">バナナ</label>
    </div>
  </div>
</div>

Checkbox

<div class="form-group">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div role="group" aria-labelledby="fruit-group">
      <label><input type="checkbox" name="fruit" value="apple">りんご</label>
      <label><input type="checkbox" name="fruit" value="orange">みかん</label>
      <label><input type="checkbox" name="fruit" value="banana">バナナ</label>
    </div>
  </div>
</div>

How to use <fieldset>and <legend>...

As another option, you can use <fieldset> and <legend>. This approach is based on HTML semantics, so the group is properly recognized without adding special attributes or roles.

The example below wraps the radio button group in <fieldset> and uses <legend> as the label.

Note: Heads up! You may want a layout where labels and inputs sit side by side for design reasons. In that case, you would need to set the fieldset to display: contents;, but this is not recommended because some browsers remove the legend from the accessibility tree. Forcing the layout with CSS and compromising accessibility is not a good approach.

<div class="form-group">
  <fieldset>
    <legend>好きな果物</legend>
    <div>
      <label><input type="radio" name="fruit" value="apple">りんご</label>
      <label><input type="radio" name="fruit" value="orange">みかん</label>
      <label><input type="radio" name="fruit" value="banana">バナナ</label>
    </div>
  </fieldset>
</div>

Summary

Labeling a group of radio buttons or checkboxes can be organized as follows.

Using the role attribute and aria-labelledby

• Flexible support is available when customization is needed
• Explicitly set the group label by combining it with role="group"

How to use <fieldset>and <legend>...

• The standard method based on semantics
• Enables a more robust and accessible implementation
• Accessibility issues may arise depending on the layout

Depending on the design and requirements, either approach can achieve appropriate accessibility.

Using <fieldset>fieldset and <legend>legend is more semantic, but for layouts such as contact forms, the overall structure may make the role attribute and aria-labelledby approach easier to work with.

Web accessibility goes deeper than you might think!