How-Tos and Demos

Accessible Graphics

Example: Alt Text for a Link that contains both Graphics and Text

This example shows a graphical icon to the left of a text link. Both the icon and the text are linked to the same page. In this case, we've placed the icon and the text inside the same link-anchor (<a> element). We used CSS (Cascading Style Sheets) to separate the icon from the text, a visual effect more often created by placing the graphical link and the text link in separate cells of a layout table. The icon in this example has an empty alt attribute (alt=""), so that screen readers ignore the image and speak only the onscreen link text.

 

How to do it

Code example for links combining text and graphics

 

Rationale

The common practice of using a layout table to position icons and text links on the page can create unintentional accessibility barriers for blind users because it forces the designer to treat the image and the text as duplicate links to the same target. Screen readers then report the alt text for the graphical link as well as the onscreen text link. This can make the Web page sound tedious and repetitive, especially if the page contains a number of these link-pairs. The duplicate links appear in the links lists that many people who use screen readers depend on to speed navigation, and require additional keystrokes for people who cannot use the mouse. By placing both the image and the text inside the same anchor element and using CSS to achieve the desired visual effect, we reduce auditory clutter and minimize the number of required keystrokes without sacrificing the visual design.

 

How it sounds with the JAWS screen reader

Listen to JAWS read this graphic

 

JAWS transcript

[Link accessibility information]

 

Applicable Accessibility Standards and Guidelines

• Section 508 Requirements and WCAG 1.0 Checkpoints for Graphics