�ֲ���ý

Alt Text for Visual Materials Guide

Download the Alt Text for Visual Materials Guide or view below

What is “alt text” and why is it important?

Alt text stands for alternative text. It is a non-visible textual substitute for image content in web pages, PDF files, and eBooks.

Alternative text is used by

• Screen readers which read the alternative text in place of the images to help users with visual or certain cognitive disabilities perceive the content and function of the images.
• Browsers which will display alternative text if an image file does not load or if the user has blocked images.
• Alternative text is used to convey the meaning of the image within the context of the page it appears in. The goal is to provide all users access to the same information.

Guidelines for writing alt text

• Alt text should convey the same important information as the image - if the image was missing, what information would be missing that the reader needs to understand?
• Alt text should be succinct - 125 characters or less is commonly recommended.
• Alt text should not repeat information that is in the image’s caption or in the article text near the image. (See “when you don’t need alt text” below).
• Don’t write something in the alt text that a user can’t learn from seeing the image or reading the caption.

When you don’t need alt text

• If the image is decorative and is not meant to convey information related to the article it should not have alt text. An example would be a decorative dingbat.
• If you provided a full description of the image's content in the caption or text, you do not need to include alt text. This means all meaningful information in the image that you are expecting users to perceive by including the image, must be described in your text.
• Screenshots that the text describes fully do not need alt text but should include a caption. This only applies when the screenshot is showing what has already been clearly described in the text. It must not be conveying additional meaning to the text that users who do not see the image would be missing.
• An illustration of an idea that the text describes does not need alt text but should include a caption. In this case the illustration is extra and is not adding new or additional information to the viewer that users who do not see the image would be missing.

Complex images

If the image contains too much information to include in concise alt text:

• Use alt text to briefly interpret the main idea of the image.
• Use a caption to summarize the image.
• Include an extended description of the information that is in the image in the text with a reference to the image number. Alternatively, the longer description could be included as a note at the end.

See in their accessibility and usability page.

Tips

• Describe information not aesthetics
• Consider the context to determine what information is important to convey. See “”.
• Use normal punctuation and be sure to end with a period
• Don’t include copyright information or photo credits in alt text, put those in the caption
• Don’t start with “image of” - users will already know they have reached an image
• Work from the general to the specific.
• If there is text in the image it should be written out, “Text says ….” or
• Consider including:
  • The placement of objects in the image
  • Image style (painting, drawing, graph)
  • Colors if relevant to the meaning (simply red, blue, green etc.) Surroundings
  • See if the text’s meaning makes sense without looking at the image/s
  • Think about why the image is being included, does it show exactly what is described in the body text, or is it adding visual information not identified in the body text?

Tips specifically for complex images

• Break the image up into its component parts, and then organize them so that the description makes logical sense.
• Provide an overview identifying the type of visualization, the labels on the axes, and the number of lines. Then describe details like the shape of particular lines or trends.

Resources

• - to help you understand and decide when to use alt text and what should be included.
• Penn State’s “” guide for images. This includes examples for alt text and complex images.
• �±��������’s t which includes examples
• “” from the UX Collective by a usability and accessibility expert about the importance of context when writing alternative text.
• has some great examples with explanations.

Complex Images

• This is an excellent guide - “” from Portland Community College
• This shows a complex image presented in various ways, “”
• from the CDC
• and t from Howard University