Techniques for WCAG 2.0

On this page:

-

# H2: Combining adjacent image and text links for the same resource

## Applicability

HTML and XHTML documents that contain links.

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

This objective of this technique is to avoid unnecessary duplication that occurs when adjacent text and iconic versions of a link are contained in a document.

Many kinds of links have both a text and iconic link adjacent to each other. Often the text and the icon link are rendered in separate links, in part to create a slight visual separation from each other. Visually they appear to be the same link, but they are experienced by many people as two identical links and this can be confusing. To avoid this, some authors omit alternative text from the image, but this would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical link. The preferred method to address this is to put the text and image together in one link, and provide null alternative text on the image to eliminate duplication of text.

Sometimes the text and the icon link are rendered in separate, adjacent table cells to facilitate page layout. Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If CSS is used, this technique can be applied to combine the links.

## Examples

### Example 1

The icon and text are contained in the same `a` element.

Example Code:

     <a href="products.html">
       <img src="icon.gif" alt="" />
       Products page
     </a>

### Example 2

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="home page icon"/>
      Go to the home page
    </a>

### Failure Example 3

This example demonstrates a failure to apply this technique. An icon and text link are side by side. The text alternative for the image is the same as the text link beside it, leading to a "stutter" effect as the link is read twice.

Example Code:

    <a href="products.html">
       <img src="icon.gif" alt="Products page" />
     </a>
     <a href="products.html">
       Products page
     </a>

### Failure Example 4

This example demonstrates a failure to apply this technique. An icon and text link are side by side. In an attempt to remove the "stutter" the text alternative for the image is null. However, now one of the links has an unknown destination, which is its own link text problem.

Example Code:

    <a href="products.html">
       <img src="icon.gif" alt="" />
     </a>
     <a href="products.html">
       Products page
     </a>

### Failure Example 5

This example demonstrates an incorrect implementation of this technique. The icon and text are contained in the same a element. However, the text alternative for the icon is a duplicate of the link text, leading to a "stutter" effect as the description is read twice.

Example Code:

    <a href="products.html">
      <img src="products.gif" alt="Products page"/>
      Products page
    </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
- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- H30: Providing link text that describes the purpose of a link for anchor elements
- C9: Using CSS to include decorative images
- F89: Failure of 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a link

## Tests

### Procedure

For each `a` in the content that contains an `img` element:

1. Check that there is no adjacent `a` element that has the same `href` attribute and the same description

For each `a` in the content that is contained in a table:

1. Check that there is no `a` element in an adjacent table cell that has the same `href` attribute and the same description

### Expected Results

- All checks above are true.

- Top
- Contents
- Intro
- Previous: Technique G199
- Next: Technique H4