Techniques for WCAG 2.0

On this page:

-

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

## Applicability

HTML and XHTML documents that contain links, (<a href> elements)

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)
- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))
- Success Criterion 2.4.9 (Link Purpose (Link Only))
  - How to Meet 2.4.9 (Link Purpose (Link Only))
  - Understanding Success Criterion 2.4.9 (Link Purpose (Link Only))

## 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 H67: Using null alt text and no title attribute on img elements for images that AT should ignore (HTML) .) 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 HMTL in the text content of the `a` element.

Example Code:

    <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.

Example Code:

    <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.

Example Code:

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

### Example 4

A link contains an icon and text, and the site help refers to the icon. The `img` has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon.

Example Code:

    <a href="foo.htm">
    <img src="house.gif" alt="icon"/>
    Home page
    </a>

### Example 5

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

Example Code:

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

## Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 - how to specify alt text

## Related Techniques

- G91: Providing link text that describes the purpose of a link
- H2: Combining adjacent image and text links for the same resource
- H24: Providing text alternatives for the area elements of image maps
- H67: Using null alt text and no title attribute on img elements for images that AT should ignore

## 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.

- Top
- Contents
- Intro
- Previous: Technique H28
- Next: Technique H32