Authoring Meaningful Image Descriptions

What Are Image Descriptions?

Image descriptions, also known as alt text, are a text alternative for images that get read aloud by a screen reader. Image descriptions are also displayed visually to the user when images fail to load. This typically is not the case with mobile or desktop applications.

Why Should I Care?

Image descriptions give equal access to visual information contained in an image that screen reader users and users with low vision would otherwise not have access to without assistance. Without an image description, screen readers will only announce that an image is present or the name of the image file.

General Guidelines for Authoring a Description

• Image descriptions must be to the point
• The description and the visual content should be equivalent
• Descriptions need to be in the same language as the surrounding content
• Avoid phrases like “A photo of…”, “A graphic of…” or “A picture of…”

Specific Guidelines

Photos and Portraits

When writing image descriptions for photos and portraits, focus on the relevant parts of the photo that directly relate to the surrounding content. Examples include:

• A smiling man wearing a dark blue button-down and khakis is walking down the sidewalk with his golden retriever guide dog.
• Governor Jim Pillen, wearing a suit and tie, smiling in front of the Nebraska State Capitol
• A tech support representative speaking with a customer through a headset.

Bad image descriptions come in a spectrum. Some may be bad because they are not descriptive enough, despite being compliant. Others might be bad because they contain redundant phrasing or both, despite also being compliant. Bad examples include:

• A man walking his dog

  • This is bad because while the image would have a description, it doesn’t provide equal access to relevant details that someone who is blind or has limited vision can’t perceive without assistance.

• A photo of Governor Jim Pillen standing in front of a building

  • This is bad because “A photo” is redundant information, “a building” isn’t descriptive enough, and a basic description of any facial expression isn’t provided. While the image would have a description, it does not provide equal access to relevant context in slightly different ways than the previous example.

• A dog

  • This is bad because it doesn’t provide equal access to the same information, therefore it doesn’t serve an equivalent purpose.

Images Containing Text

Whenever possible, prefer styling text in a document to have your desired appearance. If you must have an image with text, the image description must contain the text word-for-word. This does not include text on signage when it is not relevant to the purpose of the image and its surrounding content.

Logo Images

Often, you will hear that logo images are never decorative. That is not entirely true. There are some instances where they do not require a description, such as in the footer of a website or document. When authoring an image description for a logo, follow the following guidelines:

• If the image is the subject of discussion, describe its appearance

• If it is not used to convey meaningful information that is not already available in the surrounding text, it doesn’t need an image description. Instead, make the image decorative.

• If it is being used to identify or promote an organization, the description just needs to be the name of the organization

Decorative Images

If an image doesn’t convey anything meaningful in comparison to the main content of your page, it should be considered decorative. This is often a judgment call. The only thing you realistically risk here is introducing more clutter in screen reader output.  Examples of images that might be decorative include:

• A picture of a conference room with people sitting around the conference table on the home page of a government agency’s website
• A photo of a closet with racks of networking equipment placed on a page of a tech company’s website, where the content has nothing to do with networking infrastructure

Forms and Controls Containing Images

Some buttons, sliders, and other controls use images to convey additional information or use them as a visual label. These images provide little to no value to individuals who use a screen reader, so they would be set as decorative. If you use an image as a label for a control, you must ensure that the control has some kind of textual label. One way to do this is to use the “aria-label” attribute in its markup. You could also use an image combined with visible text if your website or application’s design allows it. Additionally, in forms when communicating that a field is required, if you’re using an image to convey that message, you must have a textual description for it. Examples of labels for controls with images include:

• Using “Play”, “Pause”, “Stop”, “Go Forward 30 seconds”, and “Go Back 30 Seconds” for audio or video playback

• Using “Increase” and “Decrease” for buttons that adjust a value of some kind

• “Next” and “Previous” for buttons that adjust a carousel or presentation style control

Backgrounds, Headers, and Footers

When you are working with headers in Word documents and background images on web pages, screen readers will skip over them. They do this to keep the reading experience focused on the main document or page content. If you put important information in a header or visually display it as a background image, you are hiding that content from a screen reader user.

Background Images

Background images are intentionally hidden from screen readers. Generally, this is a good thing. When It’s not a good thing is when infographics and other images that contain important information is displayed in this way. The key rule of thumb here is that if the content of the image is relevant to the main content in the body of the page or document, it must not be a background image. Examples of images that are suitable for use as backgrounds include:

• An image with decorative patterns or gradients and no text.
• Photos that are not directly meaningful in the context of the content of a page, such as a city skyline.

Examples of images not suitable to be background images include:

• Event flyers with information about the event
• Infographics that contain information about job postings

Headers and Footers in Documents

When authoring a document, a header and footer section inserted by your word processor is not announced by a screen reader. If an image must be placed at the top or bottom of your document, place it in the body of the document and use the above guidelines to determine the image description application strategy.

Charts, Graphs, and Diagrams

When giving charts, graphs, and diagrams text alternatives, there are general guidelines you have to follow.

• Describe the purpose of each axis and the unit of measure if provided.
• Describe the range of values of each axis
• Describe the values shown if the number of values is small enough
• If the number of data points is too high, describe trends in the data points
• Describe the kind of graph, chart, or diagram being shown

It is important to emphasize that alternative text for charts, graphs, and diagrams does not negate the need for a tabular representation of the data, especially for large datasets.

Watermarks

Watermarks are treated as decorative and not read by screen readers. If a watermark contains meaningful information, such as a classification level or an indication that the document is a draft, the information must be conveyed in the main content. Do not rely on the watermark alone to convey that information. If the watermark does not contain any meaningful information, don’t include its content in the main content. Watermarks must have low color contrast to keep focus on the main content of the document or page.