Topics

When creating a form, you can use thelabelHave you ever been confused about how to handle groups? In particular, how to label the whole group, andforSometimes I struggle with how to handle attributes.

This time, we will organize the labeling of these groups and introduce specific methods.

Common viewing methods and problems

To the first itemforpoint

For groups of radio buttons or checkboxes,<label>offorThis is a way to point an attribute to the first item.

For example, the following code:

<div class="form-group">
<label for="fruit-apple">Favorite Fruit</label>
<div>
<label><input type="radio" id="fruit-apple" name="fruit" value="apple">Apple</label>
<label><input type="radio" name="fruit" value="orange">Tangerine</label>
<label><input type="radio" name="fruit" value="banana">Banana</label>
</div>
</div>

Visually it looks fine, but the label "Favorite Fruit" is not displayed correctly by the screen reader.It will only be associated with the first radio button.Therefore, the entire group is not recognized correctly.

forDo not specify

<div class="form-group">
<label>Favorite Fruit</label>
<div>
<label><input type="radio" name="fruit" value="apple">Apple</label>
<label><input type="radio" name="fruit" value="orange">Tangerine</label>
<label><input type="radio" name="fruit" value="banana">Banana</label>
</div>
</div>

This approach makes it unclear to which element the label relates, especially for users using screen readers.It is unclear which options are associated with the labels.It becomes like this.

These are good improvement ideas

Group by role attribute and label with aria-labelledby

Radio buttons and check boxesrole="radiogroup"orrole="group"and associate the element with the label whose ID is specified by 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">Favorite Fruit</span>
<div>
<div role="radiogroup" aria-labelledby="fruit-group">
<label><input type="radio" name="fruit" value="apple">Apple</label>
<label><input type="radio" name="fruit" value="orange">Tangerine</label>
<label><input type="radio" name="fruit" value="banana">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>

<fieldset>and<legend>How to use

Another way is to<fieldset>and<legend>This approach relies on HTML semantics and ensures that the entire group is properly recognized without the need for any special attributes or roles.

In the example below, we create a group of radio buttons.<fieldset>and as a label<legend>I am using.

※ Note! : There may be cases where you want to layout the label and input side by side. In such cases, use fieldset.display: contents;However, this is not recommended because some browsers remove the legend from the accessibility tree. It is not good to forcibly align the layout with CSS and lose accessibility.

<div class="form-group">
<fieldset>
<legend>Favorite Fruit</legend>
<div>
<label><input type="radio" name="fruit" value="apple">Apple</label>
<label><input type="radio" name="fruit" value="orange">Tangerine</label>
<label><input type="radio" name="fruit" value="banana">Banana</label>
</div>
</fieldset>
</div>

summary

Labeling for groups of radio buttons or checkboxes can be organized as follows:

Using the role attribute and aria-labelledby

• Flexible customization available if required
• Explicitly set the group label in combination with role="group"

<fieldset>and<legend>How to use

• A standard approach based on semantics
• Allows for more robust and accessible implementations
• Some layouts have accessibility issues

Depending on your design and requirements, you can achieve appropriate accessibility by choosing either method.

<fieldset>and<legend>is more semantic, but in the case of an inquiry form, for example, the role attribute and aria-labelledby may be easier to use due to the overall layout structure.

Web accessibility is still in the future!