Descriptive links

Must

Link and navigation text must uniquely describe the target or function of the link or item.

Description

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

If multiple links on a screen have the same visible text, labels and hints must be used to make them unique.

iOS example

[dNameBtn setAccessibilityLabel: NSLocalizedString(@"Delete Name", @"Button label")];
[dAddressBtn setAccessibilityLabel: NSLocalizedString (@"Delete Address", @"Button label")];                        
[dNameBtn setAccessibilityLabel:@"Delete"];
[dAddressBtn setAccessibilityLabel:@"Delete"];                        

ANDROID

If multiple links on a screen have the same visible text, content descriptions must be used to make them unique.

Android example

<Button android:contentDescription="Delete Name" ...> </Button>
<Button android:contentDescription="Delete Address" ...></Button>                        
<Button android:contentDescription="Delete" ...> </Button>
<Button android:contentDescription="Delete" ...> </Button>                        

HTML

If multiple links on a page have the same visible text, alt text associated with an image element, on-screen text, or off-screen text can be used to make them unique.

HTML example

<style>
.hidden {
    position: absolute; /* required for clip style */
    overflow: hidden;
    height: 1px;
    width: 1px;
    clip: rect(1px, 1px, 1px, 1px);
}
</style>
...
<p>Content 1 title and description. 
    <a href="page1.html>More <span class="hidden">on content 1</span></a>
</p>
<p>Content 2 title and description. 
    <a href="page2.html>More <span class="hidden">on content 2</span></a>
</p>
<p>Content 3 title and description. 
    <a href="page3.html>More <span class="hidden">on content 3</span></a>
</p>                        
<p>Content 1 title and description. 
    <a href="page1.html>More</a>
</p>
<p>Content 2 title and description. 
    <a href="page2.html>More</a>
</p>
<p>Content 3 title and description. 
    <a href="page3.html>More</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.
Results

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.