Grouped elements must

It is easier and quicker for people using a keyboard or screen reader to interact with content when not overwhelmed and confused by extraneous elements. Grouping elements into a single overall control makes things clearer, simplifies interactions, and can provide larger touch targets.

For example, a control such as a custom item selector may be made up of smaller interface elements, but will be easier to use if conveyed as a single control. Another common example is grouping adjacent links to the same resource.

---

iOS

Group related controls close to each other so that it is visually obvious that they are related to each other. Avoid duplication in announcements by removing form labels from VoiceOver swipe focus order by applying the isAccessibilityElement attribute to the label and setting its value to false. Make sure that the associated form control contains an accessibilityLabel that matches the text of the visual label.

iOS Example (Objective-C)

[myVisibleLabel.text = @"Your first name"];
[myVisibleLabel.setIsAccessibilityElement:NO];
[myRelatedTextField.setIsAccessibilityElement:YES];
[myRelatedTextField.setAccessibilityLabel:@Your first name"];

---

Android

Group related controls close to each other so that it is visually obvious that they are related to each other. For example, nest groups of related controls in LinearLayouts.

---

HTML

Group related controls using native HTML and, where relevant, WAI-ARIA grouping markup. For example, use

• the fieldset and legend elements to group related form controls
• the figure and figcaption elements to group images and associated captions
• the nav element to group navigation links. Use list markup to group lists of related (non-form) items.

In terms of WAI-ARIA, mark up tab navigation widgets using tab panel markup. Use tree view markup to mark up expandable/collapsible tree-like widgets. Use toolbar markup for grouping together related styling controls (such as bold, italics and underlined).

HTML Pass Example

<fieldset>
  <legend>Billing address</legend>
  <label for="billing-street">Street</label>
  <input type="text" id="billing-street">
  <label for="billing-city">City</label>
  <input type="text" id="billing-city">
  <label for="billing-county">Country</label>
  <input type="text" id="billing-county">
  <label for="billing-postcode">Postcode</label>
  <input type="text" id="billing-postcode">
</fieldset>

<fieldset>
  <legend>Delivery address</legend>
  <label for="delivery-street">Street</label>
  <input type="text" id="delivery-street">
  <label for="delivery-city">City</label>
  <input type="text" id="delivery-city">
  <label for="delivery-county">Country</label>
  <input type="text" id="delivery-county">
  <label for="delivery-postcode">Postcode</label>
  <input type="text" id="delivery-postcode">
</fieldset>

---

Testing

Procedures

1. Activate a screen reader.
2. Identify all compound object, elements and controls on a page.
3. Verify that compound objects, elements, or controls are announced as a single unit where applicable e.g. a slider control should be indicated as a slider rather than as an up button, a down button, and an indicator.

Outcome

The following check is true:

• All compound element, objects, and controls do not indicate individual elements but rather announce themselves as whole unit.

---