U.S. Department of Energy - Energy Efficiency and Renewable Energy

Communication Standards and Guidelines

Alt Text

Alt text (short for "alternative text") is used to provide an "alternative" description for Web visitors who cannot see the images. Screen readers can read the alt text so the users know what the graphic depicts. Section 508 essentially requires us to provide good alt text that follow these guidelines:

  1. For spacer gifs and images that do not stand on their own as a representation of something (e.g., a line, border, or part of a graphic) use empty alt text.

    Example:
    <IMG SRC="spacer.gif" alt="">

  2. For simple, decorative, or incidental images, a brief description is all that is necessary.

    Example: A simple drawing of a house could be:
    <IMG SRC="home.gif" ALT="Illustration of a house.">

    If it's a photo, the alt text could be:
    <IMG SRC="home.gif" ALT="Photo of a house in Salem, Oregon.">

    If more information would be useful to the site visitor — such as the photo's location or names and titles of individuals in the photo — be sure to include it in your alt text. If the information would benefit the sighted user as well, consider using a text caption in addition to the alt text.

    Captions are not required but are very helpful to give your images context. A visitor using screen reader will hear both the alt text and the caption, so do not duplicate the information. Simple alt text such as the ones above will suffice. Developers should be sure to use the "caption" style when coding captions.

  3. If the image is linked, you must describe the destination or purpose of the link — not the image.

    Example: If the DOE seal links to the DOE site, the code should be:
    <A HREF="http://www.energy.gov">
    <IMG SRC="doe_seal.gif" ALT="U.S. Department of Energy">
    </A>

  4. If you use a graphical representation of text, your alt text should contain all of the text in the graphic. If your graphic says "Wind Power," your alt text should also say "Wind Power". For graphics with ampersands (e.g. "&") spell out "and" in the alt text, e.g. if the graphic says "Wind & Hydro" the alt text should be "Wind and Hydro."

    Example:
    <IMG SRC="wind_power.gif alt="Wind Power">

  5. Images that have associated image maps should include alt text in the image map. Use empty alt text (alt="") for the image if the text in the image's alt text would be redundant with text in the image map alt text. If the image contains information that is not in the image map alt text, include alt text that describes the unrepresented information.

  6. If the information contained in the image is important to the meaning of your page (i.e., some important content would be lost if the image were removed), you must provide a longer description or any important content in the graphic to the user.

    Example: Chart with sales for ice cube trays in certain years
    <A href="icecube_graph.gif" ALT="Graph: Freezy Corporation Ice Cube Sales by Year. 1996 -132,000; 1997 - 148,000.">

    Example: Technical illustration Example graphic for alt tag usage.

    <A href="czochrakski_process.gif" alt="Illustration of the Czochrakski process for making single-crystal silicon. Heater coils surround a cylindrical crucible that holds molten silicon. A wire holding a seed of single-crystal silicon is being pulled up, and below it a silicon ingot is forming from the molten silicon.">

  7. A good test to determine if your alt text is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?

  8. When you are constructing alt text, capitalize the first word and any proper nouns (sentence style).

    Example: This alternatively fueled bus is headed toward a shelter at Zion National Park.