91Èȱ¬

Grouping adjacent links to the same page or resource into a single link helps all users to navigate quickly, especially those using assistive technology, such as switch devices or screen readers. It reduces the number of elements to navigate, reduces screen reader verbosity, and also helps to increase .

Repeated links, for example, could be an adjacent image, title and topic that all link to the same page or resource.

---

iOS

If a link is made up of text and another page element (such as an image), avoid adding them to the view as separate elements. Instead, the link and text should be combined into the same actionable element (for example, a view). The accessibility properties must be on the grouped element and not on the individual image and text object.

iOS Example (Objective-C)

// Remove accessibility properties from the combined UIButton and UIImageView inside the view

[myButton.setIsAccessibilityElement:NO];
[myImage.setIsAccessibilityElement:NO];

// Add a trait of button to the container UIView, make it focusable through the isAccessibilityElement property, and add an appropriate label
[myView.setIsAccessibilityElement:YES];
[myView.setAccessibilityTraits:UIAccessibilityTraitButton];
[myView.setAccessibilityLabel:@"Tap me!"];

---

Android

If a link is made up of text and another page element (such as an image), avoid adding them to the view as separate elements. Instead, make sure both are combined into the same actionable element. Take the following steps:

1. Use the android:text attribute to indicate the visible text for the link;
2. Use the android:drawableLeft (or android:drawableRight, android:drawableTop etc.) attribute for the image.

Android Pass Example

<Button
  android:id="@+id/search"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:padding="24dp"
  android:text="Search"
  android:contentDescription="Search the database"
  android:drawableLeft="@android:drawable/search_icon" />

---

HTML

If a link is made up of text and another page element (such as an image), avoid adding them to the view as separate elements. Instead, make sure both are combined into the same actionable element.

HTML Pass Example

<a href="..."><img src="search.jpg" alt=""/>Search</a>

---

Testing

Procedures

1. Activate a screen reader.
2. Identify the active screen objects, elements, and controls that have textual and image components.
3. Navigate to the items.
4. Verify that the text is not announced twice.
5. Verify that there are not two equivalent actionable items announced for each item.

Outcome

The following checks are all true:

• Objects, elements, and controls with image and text labels are only announced once;
• Objects, elements, and controls that with image and text labels are grouped in such a way that they only announced as one component.

---