91�ȱ�

Unique links and navigation items are essential for screen reader and magnification users who may not perceive the context of a link or item. This is especially an issue for users who have not followed the content order.

If link text is duplicated in a page or screen (e.g. Learn more…, More info…, Continue reading…) ways of making each link unique must also be used, for example, by using labels or hidden text.

---

iOS

Use the accessibilityLabel property to distinguish between links or buttons a page that have the same visible text. For example, if a page contains two “Edit” buttons, one for editing an email address and one for editing a telephone number, take the following approach to providing a unique label for both.

iOS Example (Objective-C)

[deleteNameButton.setAccessibilityLabel:@"Delete name"];
[deleteAddressButton.setAccessibilityLabel:@"Delete address"];

---

Android

Use the contentDescription attribute to distinguish between links or buttons a page that have the same visible text. For example, if a page contains two “Edit” buttons, one for editing an email address and one for editing a telephone number, take the following approach to providing a unique label for both.

Android Pass Example

<Button
  …
  android:id="@+id/button_deleteName"
  android:contentDescription="Delete name"
  … />
<Button
  …
  android:id="@+id/button_deleteAddress"
  android:contentDescription="Delete phone number"
  … />

---

HTML

Use off-screen text to distinguish between links on a page that have the same visible text. For example, if a page contains two “Edit” links, one for editing an email address, and one for editing a telephone number, take the approach in the example code.

HTML Pass Example

<style>
  .visually-hidden {
  clip: rect(1px 1px 1px 1px); /\* IE 6/7 \*/
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  }
</style>
<p><a href="…">Edit <span class="visually-hidden">email address</span></a></p>
<p><a href="…">Edit <span class="visually-hidden">phone number</span></a></p>

---

Testing

Procedures

1. Activate a screen reader.
2. Locate the link, button or navigation item.
3. Determine if the link or item by itself is sufficient to describe the component uniquely and clearly indicates its purpose.

Outcome

The following check is true:

• Links, buttons, or navigational items are sufficiently described via text (on or off-screen), or by alternative text to clearly indicate their purpose.

Note: Off-screen text can most easily be verified by using a screen reader. This text if created correctly will be announced by a screen reader but does not appear on screen.

---