Grouped elements

Must

Controls, objects and grouped interface elements must be represented as a single accessible component.

Description

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

Disable accessibility for visual elements such as labels that are represented elsewhere such as an accessibility label for a control element.

iOS example

[FNLabel setText:NSLocalizedString(@"First Name", @"Label title")];
[FNLabel setIsAccessibilityElement:NO]; // We hide the label element since it is announced as part of the field
[FNField setAccessibilityLabel:FNLabel.accessibilityLabel];                        
[FNLabel setText:NSLocalizedString(@"First Name", @"Label title")];
[FNLabel setIsAccessibilityElement:YES];
[FNField setAccessibilityLabel:FNLabel.accessibilityLabel];                        

ANDROID

Group items into a single target container.

HTML

Where possible use standard controls rather than custom controls. HTML elements can be grouped using ARIA roles and attributes such as tablist, as well HTML 5 structures such as figure or fieldset. Group related elements inside a single link element. Whereas links representing tree nodes in HTML should be grouped using a single link element when only one action is expected of the tree node, e.g. expand/collapse.

HTML examples

<!-- Example 1 - tabs with ARIA roles and attributes -->
<ul role="tablist">
    <li role="presentation"><a href="#s1" role="tab" aria-controls="s1" aria-selected="true">Read</a></li>
    <li role="presentation"><a href="#s2" role="tab" aria-controls="s2">Watched</a></li>
</ul>
<section id="s1" role="tabpanel">...</section>
<section id="s2" role="tabpanel" aria-hidden="true">...</section>

<!-- Example 2 - figure with caption -->
<figure>
  <img src="clouds.jpg" alt="" ... />
  <img style="position:relative; left:-10px;" src="sun.jpg" alt="" ... />
  <figcaption>Partly sunny</figcaption>
</figure>

<!-- Example 3 - tree view -->
<ul>
    <li><a href=""><img src="expanded.jpg" alt="expanded" />TV Shows<span class="offscrn"> level 0</span></a></li>
</ul>                        
<!-- Example 1 - tabs -->
<ul>
    <li><a href="#s1" class="selected">Read</a></li>
    <li><a href="#s2">Watched</a></li>
</ul>
<section id="s1" class="showing">...</section>
<section id="s2">...</section>

<!-- Example 2 - figure with caption -->
<img src="clouds.jpg" alt="cloudy" ... />
<img style="position:relative; left:-10px;" src="sun.jpg" alt="sunny" ... />
<p>Partly sunny</p>

<!-- Example 3 - tree view -->
<ul>
    <li><img src="expanded.jpg" alt="expanded" /><a href="...">TV Shows</a><span class="offscrn"> level 0</span></li>
</ul>                        

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.
Results

The following check is true:

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