Alt text (short for "alternative text") describes images on the Web for visitors who use screen readers to access Web sites. To meet Section 508 requirements, all EERE Web sites are required to provide alt text with their images.
How Alt Text is Used on the Web
Alt text is the text that appears when you hover your mouse pointer over an image for a few seconds. It is used by visitors who are using screen readers to view a site. Because it is required by Section 508, every image on the EERE Web site must include alt text.
- Your alt text should describe all the important information in an image. You do not need to describe every physical detail. Describe everything important to the meaning and understanding of the image, but avoid frivolous and decorative details.
- It should never duplicate information that is provided in the content of the page or in the caption.
- It is not important that your alt text be readable by sighted users who mouse over the image.
- Alt text should begin with a word that describes what type of image it is, such as, "Photo of," "Illustration of," or "Graph of."
The content writer is responsible for writing alt text and captions for every image that is added to the Web site, and for providing this information to developers.
If you want to add information that would benefit both sighted visitors and visitors using screen readers, this information should not be in the alt text. It should be placed in a caption, displayed underneath the image.
Captions should never duplicate information that is included in the alt text. The alt text and caption should supplement each other, with the alt text written for screen readers and the captions written for all visitors.
Here is an example of the alt text and caption working together:
Alt Text: Photo of an industrial complex in a desert setting, with mountains in the background. The complex consists of several small buildings and a jumbled tangle of large industrial pipes and other equipment. Behind the complex are three square structures, each holding four cooling towers, which are emitting slight wisps of steam.
Caption: The Interior Department plans to offer more than 190 million acres of federal lands for geothermal leasing, potentially resulting in a tripling of U.S. geothermal power capacity by 2015.
Writing Alt Text
Some images require different styles of alt text. These are the standards for writing alt text for different types of images on the EERE Web site.
For simple or decorative images, a brief description is all that is necessary. 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—this can also be included in your alt text.
Purely decorative images, which add no meaningful information to a page, such as bullets or page dividers, do not require alt text. Web developers should code these with empty alt text.
Photo of a man reading a newspaper.
If the image is linked, you must describe the destination or purpose of the link. If describing the image will add to a reader's understanding of the page, include a description of the image in the alt text. If the image is decorative or symbolic, you do not need to describe the image.
In this example, the image links to the "Maps" section of the EERE Analysis website:
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."
Here is an example from the EERE Financial Opportunities Web site:
Alt text: EERE Financial Opportunities
An image map allows you to divide an image into hotspots which can then be linked to different destinations. When developing an image map, you are required by Section 508 to write alt text for each link. In general, the alt text should follow the guidance for linked images. See the "Linked Images" section.
Additionally, you may want to write separate alt text for the entire image, if it adds any important information to the page. Alt text for the entire image is not needed if it would be redundant with the alt text you have written for the individual links.
For an example of an image map, please see the Green Power Network's Can I Buy Green Power In my State Web page. In this case, every individual state has alt text. Additionally, the entire image has the alt text, "Map of the United States."
Technical Diagrams, Graphs, and Charts
If an image contains detailed information, such as a technical diagram, chart, or graph, you must include all of the relevant data in the alt text.
If the content of the page describes the technical information shown in your image, you do not need to duplicate this information in the alt text.
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.
Chart showing the cost of the automotive fuel cell system, which is projected to a high-volume manufacturing of 500,000 units per year. In 2002, the cost of the automotive fuel cell system (including balance of plant and stack) was $275/kW. The cost decreased to $108/kW in 2006, to $94/kW in 2007, to $73/kW in 2008, $61/kW in 2009, to $51/kW in 2010, and to $49/kW in 2011. The target cost for 2017 is $30/kW.
Some images, such as maps, are too complex or too visually-oriented to describe in alt text. For an example of this type of image, see the Wind Powering America Wind Resource Maps. In this case, you are required to provide a link to the Webmaster, along with the text below, on the page with the image. This text should preferably be in the image's caption:
If you have a disability and need assistance reading this image, please email the Webmaster.
CSS Background Images
The EERE template uses Cascading Style Sheets (CSS) to present background images that add to the aesthetic appeal of the page, but do not add any real meaning to the content. Because they do not add any meaning, these CSS background images do not require alt text. If you are using a CSS background image that does add meaning to the page, it should be coded as a regular image with alt text.