Per Section 508 requirements, images on EERE websites and applications must have alt text. Alt text describes what an image looks like in words, making it accessible to screen readers.
Writing Alt Text
Alt text is a written description of the items, events, and text in the image. Briefly summarize the image. Most alt text should look like this:
Photo of a pair of hands holding corn stover, the unused parts of harvested corn.
When writing alt text, follow these guidelines:
- There is an 85 character limit on alt text in Energy.gov, so your descriptions should be concise.
- Describe the important information in an image. You do not need to describe every physical detail.
- Never duplicate information in the content of the page or the image's caption.
- Begin your alt text by describing what type of image it is, such as, "Photo of," "Illustration of," or "Graph of."
Adding Alt Text to Images
Follow these steps to add alt text to an image in Energy.gov:
- Edit the page you want to add alt text to.
- Right click on an image.
- Select "Image Properties."
- Copy your alt text into the "Alternative Text" field.
Writing Captions to Complement Alt Text
If you want to add information that would benefit both sighted visitors and visitors using screen readers, this information should be in a caption.
Captions shouldn't duplicate 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.
Images That Require Special Alt Text
Some images require different styles of alt text.
If your website is hosted outside of the Energy.gov Drupal environment, you may have purely decorative images, such as bullets or page dividers, that do not add any meaningful information to the page. These do not require alt text. Web developers should code them with empty alt text.
If the image is linked, describe the destination of the link in the alt text.
When an image contains text, your alt text should include all of it. 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."
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.
Because Energy.gov has a limit of 85 characters for alt text, you may want to consider adding a text version for images with extremely complicated text. Alternately, you can follow the guidelines in the Detailed Maps section.
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 to describe in alt text. For an example of this type of image, see the WINDExchange 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.
Image maps are only used on websites outside of the Energy.gov Drupal environment.
An image map allows you to divide an image into hotspots which can then be linked to different destinations. When developing an image map, write alt text for each link. In general, the alt text should follow the guidance for linked images. Additionally, you may want to write separate alt text for the entire image, if it adds any important information to the page.
For an example of an image map, please see the Green Power Network's Can I Buy Green Power In my State Web page. Every individual state has alt text. Additionally, the entire image has the alt text, "Map of the United States."
CSS Background Images
CSS background images are only used on websites outside of the Energy.gov Drupal environment.
Cascading Style Sheets (CSS) are used to show 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.