The purpose of the link is not clear within its programmatically determined link context.
- Rule ID:
- link-purpose-unclear
- User Impact:
- Serious
- WCAG :
- 2.4.4.a
Rule
The purpose of each link MUST be able to be determined from the link text alone, or from the link text and its programmatic context.
Background
Link text, or link text along with the programmatic context of the link, should be sufficient for determining the destination of a link. Meaningful link text helps people choose which links to follow without requiring complicated strategies to understand the page.
When link text — along with its immediately surrounding content — does not completely describe the destination of a link, people who are blind, and people with mobility impairments, reading disabilities, and low vision may have more difficulty understanding the purpose of a link.
In order to sufficiently describe a link's destination, the link text and its programmatic context must provide a complete description of the destination. Whenever possible, provide link text that identifies the purpose of the link without needing to refer to surrounding content. If referring to surrounding content is necessary, the programmatic context can be one of the following:
- same sentence, paragraph, list item, or table cell as the link;
- in the table header cell for a link in a data table;
- via aria-label or aria-labelledby attributes.
Note: Context taken from surrounding text will be most usable if it precedes the link.
Code Examples
Good Examples:
If programmatic context is insufficient, the following examples are ways to add descriptive text to a link.
Descriptive link text:
<p><a href="https://dequeuniversity.com/contact/">Contact Us</a></p>Image link alt text
<a href="https://dequeuniversity.com/curriculum/">
<img src="info.png" alt="Web accessibility curriculum">
</a>Aria-label for link when link text is unclear
<a href="https://www.si.edu/Museums/air-and-space-museum-udvar-hazy-center" aria-label="Read more about the Steven F. Udvar-Hazy Center">
<span>Read more...</span>
</a>Visually hidden descriptive link text
<a href="https://www.si.edu/Museums/american-history-museum">
<span>Read more</span>
<span class="visually-hidden">about the National Museum of American History</span>
</a>Aria-label for link with background image
<a href="https://www.facebook.com/dequesystems/" class="facebook-icon" aria-label="Deque's Facebook page"></a>Failure Example:
Non-descriptive link text:
<p>
<span>Learn more about our products </span>
<a href="/products.html">here</a>
<span>.</span>
</p>
<p>
<span>To read a fascinating article about the resident microbes in the human body </span>
<a href="http://tinyurl.com/c3z77jt">click here</a>
<span>.</span>
</p>
<p>
<span>Our second quarter earnings have surpassed investor expectations. </span>
<a href="surpassed.html">More...</a>
</p>Links to the same page have different text:
<p><a href="contact.html">Our Company</a></p>
<p><a href="contact.html">Contact Us</a></p>Links to different pages have same text:
<p><a href="contact.html"></a>Contact Us</a></p>
<p><a href="directory.html">Contact Us</a></p>How To Fix
Fix this issue by using ONE of the following techniques:
- Provide unique, descriptive link text that conveys the purpose of the link.
- Ensure that the link text PLUS its programmatic context conveys the purpose of the link.
- Provide alt text for an image (<img />) acting as a link that describes the purpose of the link.
- Provide descriptive link text using an aria-label in the <a> tag. Note that the aria-label text overrides link text completely, so the text in the aria-label itself needs to be sufficient.
- Provide descriptive link text in a visually hidden text inside the link.
- Provide an aria-label for a link containing a background-image.
Don't do this:
- Use the same text for multiple links on a page if they lead to different destinations.
- Use different link text for multiple links that lead to the same destination.