Group related fields - Web Accessibility Guidelines

Impact: Strong to major

Users mainly impacted: Blind, visually impaired, mentally handicapped.

RGAA criteria: Criterion 11.5 [A] - Criterion 11.6 [A] - Criterion 11.7 [A]

Explanation

In some forms, it is necessary to create groups of fields. These field groupings are useful to avoid misleading some users, especially blind users. For example, an online purchase form offers a form with the entry of a delivery address and a billing address. Since both will have fields with similar labels, it is imperative to create a grouping so that the user understands which address he is filling in. Field groupings must also have a relevant label in the legend tag.

Other typical cases of application are groups of checkboxes or radio buttons.

Do not always group together

A search form with only one text field does not need to be grouped.
A single checkbox to validate the agreement on personal data (GDPR).

Group with ARIA

In some situations, it is not possible to group with the pair fieldset legend, in which case it is possible to use the grouping through ARIA.

<div role="group" aria-labelledby="useful-content">
    <p id="useful-content">Was this content useful to you?</p>
    <div>
        <input type="radio" id="yes" checked>
        <label for="yes">Yes</label>
        <input type="radio" id="no">
        <label for="no">No</label>
    </div>
</div>