Grouping form elements

Must

Controls, labels, and other form elements must be properly grouped.

Description

Properly grouped form elements help all users understand the relationships between form controls and make forms easier to use. For users of assistive technology this can mean fewer steps and reduced complexity.

Correctly grouped controls also ensure standard behaviours work as expected.

There are four things to consider when grouping form elements:

  • correctly associating labels with form controls,
  • correctly associating related radio buttons or checkboxes,
  • wrapping related form elements in a labelled container such as fieldset with legend,
  • keeping labels and legends succinct to minimise verbosity.

IOS

iOS does not provide a mechanism for grouping controls. Controls that are related can be noted using the accessibilityLabel property to indicate the group that an object relates to, for example, to differentiate between a shipping and billing address field that would normally be labelled "Address:".

iOS example

[shipAddy setAccessibilityLabel:[NSString stringWithFormat: NSLocalizedString(@"Shipping Address:", @"Label title")]];
[billAddy setAccessibilityLabel:[NSString stringWithFormat: NSLocalizedString(@"Billing Address:", @"Label title")]];                        
[shipAddy setAccessibilityLabel:[NSString stringWithFormat:@"Address"]];
[billAddy setAccessibilityLabel:[NSString stringWithFormat:@"Address"]];                        

ANDROID

Android does not provide any general method of grouping form controls apart from the RadioGroup structure. Radio buttons are normally used together in a RadioGroup. When several radio buttons live inside a radio group, checking one radio button unchecks all the others. Refer to Android Developer Training - organising content.

Android example

Radio button components grouped together via a RadioGroup:

<RadioGroup android:layout_width="match_parent" android:id="@+id/radioGroup_1" android:orientation="horizontal">
  <RadioButton android:layout_height="wrap_content" android:id="@+id/radio_0" android:checked="true" android:text="Option A" android:contentDescription="Choose Option - Option A"></RadioButton>
  <RadioButton android:layout_height="wrap_content" android:id="@+id/radio_1" android:text="Option B" android:contentDescription="Choose Option - Option B"></RadioButton>
  <RadioButton android:layout_height="wrap_content" android:id="@+id/radio_2" android:text="Option C" android:contentDescription="Choose Option - Option C"></RadioButton>
</RadioGroup>                        

Individual radio buttons that are not grouped together, yet are supposed to be exclusive:

<RadioButton android:layout_height="wrap_content" android:id="@+id/radio_0" android:checked="true" android:text="Option A" android:contentDescription="Option A"></RadioButton>
<RadioButton android:layout_height="wrap_content" android:id="@+id/radio_1" android:text="Option B" android:contentDescription="Option B"></RadioButton>
<RadioButton android:layout_height="wrap_content" android:id="@+id/radio_2" android:text="Option C" android:contentDescription="Option C"></RadioButton>                        

HTML

  • Ensure all radio buttons in a group have the same name attribute.
  • Use the legend and fieldset grouping to group form fields.
  • Use the ARIA radiogroup role when using non-standard HTML radio button controls.

HTML example

Correct use of name attribute ensures checking one radio button will uncheck the other:

<fieldset>
  <legend>Would you like to receive email updates?</legend>
  <input name="rg1" type="radio" id="r1" value="yes"/>
  <label for="r1">Yes</label>
  <input name="rg1" type="radio" id="r2" value="no"/>
  <label for="r2">No</label>
</fieldset>                        

Incorrect use of the name attribute prevents correct keyboard access to radio buttons:

<input name="r1" type="radio" id="r1" value="yes"/>
<label for="r1">Yes</label>
<input name="r2" type="radio" id="r2" value="no"/>
<label for="r2">No</label>                        

TESTING

Procedures
  • Activate a screen reader.
  • Locate any forms within the screen.
  • Determine if one or more logical groupings exist within the form.
  • For each grouping, navigate to each field in the group and verify that the group name is announced prior to the field’s label.
  • Verify that the methods of interacting with each grouping work as expected with alternative input methods.
Results

The following checks are all true:

  • On-screen fields that are part of a logical grouping have a visible group name indicated as part of the label for the on-screen field;
  • For each field that is part of the group, the group label is announced prior to the field’s label by either using platform conventions to associate fields with a group and testing using a screen reader, or pre-pending the group label to the accessible name of each field within the group;
  • For each group of items, navigation and interaction among the group items must work as expected for group items, for example, properly grouped HTML radio buttons allow navigation between them via up and down arrows.