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.
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:
Pair of hands holding corn stover, the unused parts of harvested corn.
When writing alt text, follow these guidelines:
- Energy.gov requires alt text to be between 20 and 250 characters long. Be concise.
- Alt text should convey why the image was included in or relevant to the content, rather than simply describing how the image looks.
- If the alt text is a computer-generated, visual description of the image, replace it. Computer-generated descriptions often don't describe the relevant content of the image.
- Include all critical information, such as numbers and other data.
- If this cannot be conveyed concisely, consider writing a text version of the image.
- 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.
- Alt text must be in the same language as the main content. For example, if you translate English content into Spanish, you must also translate the alt text into Spanish.
Adding Alt Text to Images
Follow these steps to add alt text to an image in Energy.gov:
- Add a media block to the page.
- 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.
- You must add alt text before you can save the image. Put it in the "Alt Text" field.
- 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."
Writing Captions to Complement Alt Text
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.
How to Write Alt Text for Different Kinds of Images
Some images require different styles of alt text.
Decorative Images
If an image does not contain information that is necessary for the reader to understand the main content and is pure decoration or is used only for visual formatting, it is decorative. Many programs allow you to select whether an image is decorative or indicate to screen readers that they should skip this image. Note that if you fail to set the alt text to decorative, a screen reader may read the file name for the image rather than skip the image altogether as intended.
Spacers, lines and separators typically are decorative and should be marked as such. Only write alt text for them if separators are used to convey a meaning or serve as a functional image used to initiate action or prompt a response.
Logos
Logos are never decorative, so they require alt text. Describe any significant symbols or graphics, and include any text in the logo word for word in the alt text.
Linked Images
If the image is linked, describe the destination of the link in the alt text instead of describing the image.
Graphical Text
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'."
Technical Diagrams, Graphs, and Charts
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
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.
CSS Background Images
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.