Combining repeated links

Must

Repeated links to the same resource must be combined within a single link.

Description

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 touch target size.

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

IOS

When an image and text appear adjacent and have the same target - the link and text should be combined into the same actionable element. The accessibility properties must be on the grouped element and not on the individual image and text object.

iOS example

[aFNLabel setText:NSLocalizedString(@"First Name", @"Text label for the text entry field")];
[aFNLabel setIsAccessibilityElement:NO]; // We hide the label element since it is announced as part of the field
[aFNField setPlaceholder:NSLocalizedString(@"Required", @"Placeholder text put in text entry field")];
[aFNField setAccessibilityLabel:NSLocalizedString(@"First name required", @"A11y label for combined label + field entry")]; // Not constructing a string from label name + placeholder to avoid translation problems of constructed strings                        

Problems with untranslatable text, constructed accessibility labels, no translation comments:

// Example 1
[FNLabel setText:NSLocalizedString(@"First Name", nil)];
FNField setPlaceholder:NSLocalizedString(@"Required", nil)];
[FNField setAccessibilityLabel:[NSString stringWithFormat:@"%@ %@", FNLabel.accessibilityLabel, FNField.placeholder]];

// Example 2 - an UIImageView and UILabel
imageView.image = [UIImage imageNamed:@"addBookmark"];
ImageView.accessibilityLabel = @"Add";
textLabel.text = @"Add";
textLabel.accessibilityLabel = @"Add";                        

ANDROID

Set redundant elements to non-focusable and ensure contentDescription includes all required information in the remaining focusable element.

Android example

//On-screen text followed by button, the contentDescription for the button component is a repetition of the on-screen text. The on-screen text is not focusable.

<TextView android:id="@+id/add_label" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Add"></TextView>

<Button android:id="@+id/add" android:layout_height="wrap_content" android:layout_width="wrap_content" android:contentDescription="Add"></Button>                        
//On-screen text followed by button, the contentDescription for the button component is a repetition of the on-screen text. The on-screen text is focusable.

<TextView android:id="@+id/add_label" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Add"
android:focusable="true"></TextView>

<Button android:id="@+id/add" android:layout_height="wrap_content" android:layout_width="wrap_content" android:contentDescription="Add"></Button>                        

HTML

Place images requiring alt text but with a redundant associated text link into one anchor element and set the alt attribute of the image to null.

HTML example

<a href="..."><img src="search.jpg" alt=""/>Search</a>                        
<a href="..."><img src="search.jpg" alt="Search"/></a><a href="...">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.
Results

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.