H30: Providing link text that describes the purpose of a link for anchor elements | WAI | W3C Skip to content

Technique H30:Providing link text that describes the purpose of a link for anchor elements

About this Technique

This technique relates to:

This technique applies to HTML documents that contain links, (<a href> elements).

Description

The objective of this technique is to describe the purpose of a link by providing descriptive text as the content of the a element. The description lets a user distinguish this link from other links in the Web page and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.

When an image is the only content of a link, the text alternative for the image describes the unique function of the link.

When the content of a link contains both text and one or more images, if the text is sufficient to describe the purpose of the link, the images may have an empty text alternative. (See Using null alt text and no title attribute on img elements for images that assistive technology should ignore.) When the images convey information beyond the purpose of the link, they must also have appropriate alt text.

Examples

Example 1

Describing the purpose of a link in HTML in the text content of the a element.

<a href="routes.html">
  Current routes at Boulders Climbing Gym
</a>

Example 2

Using the alt attribute for the img element to describe the purpose of a graphical link.

<a href="routes.html">
  <img src="topo.gif" alt="Current routes at Boulders Climbing Gym"> 
</a>

Example 3

Using an empty alt attribute when the anchor (a) element contains text that describes the purpose of the link in addition to the img element. Note that the link text will appear on the page next to the image.

<a href="routes.html">
  <img src="topo.gif" alt="">
  Current routes at Boulders Climbing Gym
</a>

Example 4

A site allows users to provide feedback on products by clicking on the "Feedback" link in a product detail page. Other users are able to provide a response to any feedback. When a response to the user's feedback is available, the feedback link displays an icon, with "response received" as its text alternative, after the "Feedback" text. The site's help document describes this icon as a speech bubble containing quotation marks and includes the icon, with its text alternative, as an example. The same text alternative is used in the product detail pages (when a response is available) to help ensure that users following the documentation can identify the image correctly as documented.

<a href="prod_123_feedback.html">
  Feedback 
  <img src="response.gif" width="15" height="15" alt="response received">
</a>

Example 5

A link contains text and an icon, and the icon provides additional information about the target.

<a href="WMFP.pdf">
  Woodend Music Festival Program
  <img src="pdficon.gif" alt="PDF format">
</a>

Example 6

The "MyCorp" company's annual report is made available on the corporate website as a PDF, and the annual corporate budget is made available as an Excel file on the web site.

Note

Many users prefer to know the file type when opening a file that results in opening a new application to view the file, so it is often regarded as useful to include this additional information. However, this is not required for compliance with this Success Criterion.

<ul>
  <li>
    <a href="2009mycorp_report.pdf">MyCorp 2009 Annual Report (PDF)</a>
  </li>
  <li>			
    <a href="2009mycorp_budget.xls">MyCorp 2009 Annual Budget (Excel)</a>
  </li>		
</ul>

Related Resources

No endorsement implied.

Tests

Procedure

For each link in the content that uses this technique:

  1. Check that text or a text alternative for non-text content is included in the a element.
  2. If an img element is the only content of the a element, check that its text alternative describes the purpose of the link.
  3. If the a element contains one or more img element(s) and the text alternative of the img element(s) is empty, check that the text of the link describes the purpose of the link.
  4. If the a element only contains text, check that the text describes the purpose of the link.

Expected Results

  • The above checks are true.
Back to Top