Alt Text Requirements for Web Images

Section 508 of the 2017 Rehabilitation Act requires all images on Office of Energy Efficiency and Renewable Energy (EERE) websites and applications to have alternative (alt) text. Alt text describes images in words so they can be read and understood by visitors using screen readers.

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:

When writing alt text, follow these guidelines:

• Energy.gov requires alt text to be at least 20 characters long.
• Alt text cannot be longer than 250 characters. Be concise.
• Convey the meaning the image is conveying to the reader. You don't need to describe everything in the image or describe it in a decorative way.
• Include all critical information, such as numbers and other data.
• Do not include information that is unimportant to the viewer (e.g., descriptions of people in an image) unless it's relevant (e.g., an article about glasses).
• Do not duplicate information that appears in the image's caption or the content of the page. If the image itself is described elsewhere on the page, keep the alt text minimal.
• Do not start alt text with phrases like “Photo of...” or “Illustration of...” A screen reader will already automatically start with this.

Follow these steps to add alt text to an image in Energy.gov:

1. Add a media block to the page.
2. Add the image in one of two ways:
   • If the image has not been uploaded to Energy.gov, upload the image from your computer.
   • If the image has already been uploaded, find the image in the Media Library.
3. You must add alt text before you can save the image. Put it in the "Alt Text" field.
4. If an image has already been added to the page, you can edit the alt text by right clicking on the pencil icon and selecting "Configure" from the menu. 
   • To override alt text for an image, check the box next to "Display Override Text Fields" and scroll down to the "Alt Text Override" text box. Enter the alt text you want to appear for the image, and then click Update.

If you want to add information that would benefit both sighted visitors and visitors using screen readers, put it in the 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. 

Some images require different styles of alt text.

If the image is linked, describe the destination of the link in the alt text instead of describing the image.

You should minimize text on your graphic (and move it into the caption).

If your image only includes text, the alt text should only consist of that text. For example, if the graphic says, "Wind and Hydro," then the alt text should be: "Text reading, 'Wind and Hydro'."

If an image contains complicated data, charts, and graphs that cannot be described in 250 characters or less, you will need to create a separate HTML page—a text version—or describe all of the data in the caption or the body of the page.

If the image is too complex to describe in a text version—for example, if you have an animation, map, or other graphic with large amounts of information—provide a link to the webmaster and the text:

If you have a disability and need assistance reading this image, please email the webmaster.

This text should preferably be in the image's caption.

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.

Cascading Style Sheets (CSS) background images are only used on websites outside of the Energy.gov Drupal environment.

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.