ALT Text and Text Alternatives

Combine adjacent image and text links for the same resource

Techniques

Images and descriptive text (such as captions) link to the same location

Frequently, text and image links are positioned adjacent to one another. Often the text and the icon link are rendered in separate links, in part to create a slight visual separation. Visually they appear to be the same link, but they are experienced by many people as two identical links and this can be confusing. When images and text are adjacent to one another, and link to the same resource, both elements should be contained in a single link.

The image should include empty ALT text, with no title. If ALT text is used, assistive technology may speak phrases twice--an effect called "stutter"--and the user may become disoriented. If separate links are employed, but ALT text is omitted, then a user will encounter a link with no context.

Example: Adjacent Image and Text Link (PASS)

Both image and text elements are contained in the same link container. The image uses empty ALT text, and the text that is adjacent to the image provides the context for the link.

<a href="http://www.uiowa.edu">
<img src="../common/images/oldcap.png" alt="" /><br />
Old Capitol Building on the University of Iowa Campus</a>

Example: Adjacent Image and Text Link (FAIL)

Two links to the same location are presented in succession. Because ALT text is omitted altogether (not empty), the user receives no information about the first link.

<a href="http://www.uiowa.edu">
<img src="../common/images/oldcap.png" /></a><br />
<a href="http://www.uiowa.edu">Old Capitol Building on the University of Iowa Campus</a>

Example: Adjacent Image and Text Link (FAIL)

Two links to the same location are presented in succession. Because the image's ALT text echoes the adjacent text, the user receives two identical links and may become disoriented.

<a href="http://www.uiowa.edu">
<img src="../common/images/oldcap.png" alt="Old Capitol Building on the University of Iowa Campus" /></a><br />
<a href="http://www.uiowa.edu">Old Capitol Building on the University of Iowa Campus</a>

Example: Adjacent Image and Text Link (FAIL)

Both image and text elements are contained in the same link container, but the ALT text echoes the text that is adjacent to the image, causing stutter.

<a href="http://www.uiowa.edu">
<img src="../common/images/oldcap.png" alt="Old Capitol Building on the University of Iowa Campus" /><br />
Old Capitol Building on the University of Iowa Campus</a>