County of Sonoma, California
Site Search

You are here:

Graphs and Charts

Below is an example of an accessible image. In this case it is a pie chart that requires a text explanation. Note the "D-link" immediately at the lower right corner of the chart:

Percent of Employment, by Industry d

Source Code Example

<img src="Images/chart.gif"
alt="Percent of Employment, by Industry"
width="350" height="235"
longdesc="longdesc_chart.htm" />

<a href="longdesc_chart.htm"
title="Link to full description of image
entitled, "Percent of Employment,
by Industry"">d</a>

Explanation

When the "alt" attribute cannot adequately describe the function or purpose of the image, Web Accessibility Initiative (WAI) Guidelines state that content authors must provide descriptive text using the "longdesc" attribute.

At present, however, the "longdesc" attribute is not widely supported by most browsers. Until it is, content authors must add "d-links" to all documents employing "longdesc" to ensure that visitors have access to the description. A description link or "d-link" inserts a small image, often invisible, providing a link to a more complete explanation or description. Because it is a true link, it will be read by screen readers and users can tab to it.

The advantage of including "longdesc" in current web documents is that when newer browsers deprecate d-links, the "longdesc" attribute will ensure the description remains accessible.

The linking HTML text file should:

  1. Have a name that includes the name of the the image it explains, in this case "longdesc_chart.htm".
  2. Open in the same window (as opposed to a "blank" window).
  3. Have content that is as simple and as free of HTML formatting as possible.
  4. Provide a simple linking back to the previous page.
  5. Example

Best Practices

Use both longdesc attributes and d-links on images that require a long description.

References