OIT Design Guide -Images

Images are a wonderful way to draw attention, or to build on a story, or to provide visual reinforcement to a concept you are trying to explain. Wonderful that is unless you have a vision impairment that prevents you from seeing the image clearly or at all. For those individuals, without a textual description, images can just be another frustrating barrier to comprehension.

Alt Text

To minimize the frustration and to increase understanding, images that are intended to convey meaning must have a textual equivalent. Fortunately, documents created in Word, PowerPoint, converted to PDF, or those created for the web can take advantage of an alternative text attribute — commonly referred to as alt text. Alt text is intended to provide the textual equivalent of the image which then allows screen readers to convey the meaning to the user.

General Guidance for Alt Text

All images must have alt text.
Images cannot be the only way to convey meaning, there must be a textual equivalent available.
Avoid text on images or images that are just text.
Don't use acronyms if they can be avoided, but if you do, place a space between the letters so the screen reader does not attempt to read the acronym as a word.
Keep the alt text clear, meaningful and concise (due to screen reader behavior, the text should be limited to 125 characters). If longer text is required to convey the message, use captions or the surrounding text, and then in the alt attribute use "see description above or below."
For Word and PowerPoint, place any alt text in the Description field, not the Title field of the Format Picture dialog.
End alt text with a period. This signals the screen reader to pause before proceeding
If the image is just decorative and conveys no real meaning, use an empty alt attribute. This is not an option in Word or PowerPoint so add text. If the document is converted to PDF then you can go back and remove the text and mark it as decorative.
If the image is a hyperlink without any text, it must have alt text. If the link includes the image and text, then the empty alt can be used to avoid redundancy.
Do not use "a picture of," "an image of," "a photo of," "the so-and-so icon."

Websites

If the image requires a great deal of explanation and it is not directly supported in the surrounding text, use the longdesc="" attribute to provide a link to a page that provides a complete explanation of the image.
For decorative images an empty alt attribute can be used (alt="").
Do not use the title attribute instead of the alt attribute. The title attribute should not be used unless you are providing a tooltip.

Captions

Captions must not be seen as a replacement for content that should be in the body of the article, but can be used in lieu of alt text if greater explanation is needed. Captions can provide additional understanding to all users if the image represents concepts that may not be universally understood or are abstract in nature.

Additional References

The Department of Veterans Affairs' Section 508 office provides outstanding training on creating accessible documents. Please visit the Section 508 website for additional information.

Other Resources