Web accessibility: How should you properly label groups of radio buttons and checkboxes?

When creating forms, have you ever been uncertain about how to handle label elements for groups of radio buttons or checkboxes? In particular, it can be tricky to know how to label the entire group and how to deal with the for attribute.

This time, we'll organize approaches to labeling these groups and introduce concrete methods.

Common approach and its issues

Pointing for to the first item

This is a method of directing the element's for attribute to the first item in a group of radio buttons or checkboxes.

For example, here's what the code looks like.

<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>

While it may appear to have no visual issues, screen readers associate the label "favorite fruit" with only the first radio button, so the entire group is not recognized correctly.

omit 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>

This approach lacks clarity about which label relates to which element. Particularly for screen reader users, it becomes unclear which option is associated with the label.

A better improvement approach

Group with role attribute and label with aria-labelledby

This method groups radio buttons and checkboxes with role="radiogroup" or role="group", then associates them with a label element by specifying its ID via aria-labelledby. This makes it explicit to screen readers that the label "favorite fruit" applies to the entire group.

Radio buttons

<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>

Checkboxes

<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>

Using and

Another approach is to use and . This method is grounded in HTML semantics and ensures the entire group is recognized appropriately without requiring special attributes or roles.

In the example below, we wrap a group of radio buttons in and use as the label.

Note: There are cases where you might want labels and inputs arranged side-by-side for design purposes. In such cases, you might set fieldset to display: contents;, but in some browsers this causes legend to be removed from the accessibility tree, which is not recommended. We want to avoid situations where forcing layout alignment with CSS compromises accessibility.

<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 groups of radio buttons and checkboxes can be organized as follows.

Using role attribute and aria-labelledby

• Flexible customization available when needed
• Explicitly set group labels combined with role="group"

Using and

• Standard approach based on semantics
• More robust and accessible implementation possible
• Potential accessibility concerns depending on layout

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

and are more semantic, but for contact forms and similar use cases, the role attribute and aria-labelledby approach might be more practical depending on overall layout structure.

Web accessibility goes deeper than you think!