Form input groupings (i.e., related radio buttons, related checkboxes, related text inputs like First/Last name) are grouped semantically.

WCAG 2 criterion

1.3.1 Info and Relationships (Level A)

Tools and requirements

• Siteimprove

Test procedure

This test concerns the use of multiple inputs which are part of the same group. The common input types this concerns are radio buttons and checkboxes, but it applies to any grouping of inputs.

Examples of input groupings are

• A grouping of radio buttons to select an option
• A grouping of checkboxes to select multiple options for the same query
• A first name text input and a last name text input which together create the user's Name

For any situation where inputs should be considered part of the same group

• Ensure that there is a container whose semantic purpose is to group inputs together
  • In HTML, the <fieldset> tag is used to group inputs together
  • Using ARIA, you can use role="group" for a generic grouping of inputs
  • Using ARIA, you can use role="radiogroup" for a grouping of radio buttons.
• Ensure that the grouping has a label
  • In HTML, if using the <fieldset> tag, a label is supplied by the <legend> tag. The <legend> tag is positioned nested within the <fieldset> tag.
  • Using ARIA, if role="group" or role="radiogroup" is used
    • aria-label or aria-labelledby are used to supply the label.
    • The aria-label or aria-labelledby is applied to the same tag that the role is applied to.