Authoring Meaningful Alternative Text

Alternative text, also known as alt text, is descriptive text that conveys the meaning of an image in digital content. It’s designed to make visual content accessible to people with vision disabilities.

When a person uses assistive technology such as a screen reader, the screen reader will read the onscreen text aloud. When the screen reader reaches an image, it will read the alt text for that image so the user can know what the image is meant to convey. Images can provide illustrative information, or they can act as buttons and similar interactive elements, so the alt text must describe these aspects to the user so they can respond appropriately.

Without alt text, people who use screen readers cannot access the content provided in the images. This is why alt text is a requirement in the Section 508 guidelines for creating digital content.

Additionally, alt text makes content accessible to other users, like those who may have difficulty understanding the meaning of the visual content, or users without access to high-speed internet who cannot access images on the web. It also makes the visual content available for technical applications, such as Search Engine Optimization (SEO), digital assistance, and artificial intelligence.

What is Alternative Text?

Alternative text, also known as alt text, is descriptive text that conveys the meaning of an image in digital content. It’s designed to make visual content accessible to people with vision disabilities. While there are other benefits of alt text for all users, this video focuses on people who use screen readers.

Duration 3m 25s | 1-Part Video Tutorial

Resources on How to Add Alt Text

General Guidelines

When writing alt text, follow these guidelines:

Specific Guidelines

Photos and Portraits

Describe the content of the photo that is relevant to the surrounding context. Instead of describing how the image looks, describe what information is being conveyed.

Example for Photos and Portraits

Microsoft Word document highlighting the Review ribbon, Check Accessibility button, and the Accessibility panel.

Figure 1. Example for Photos and Portraits.

Images that Contain Text

When possible, do not include text as part of an image. Instead, type the text in the document and adjust the formatting of the text until it has the desired appearance.

If you have an image that does contain text, include it in the alt text word for word.

Example for Images that Contain Text

Figure 2. Example for Images that Contain Text.

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.

Example for Logos

Figure 3. Example for Logos.

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.

Example for Decorative Images

Example image next to text:

Figure 4. Example for Decorative Images.

Background Images

Many programs skip background images in screen reader descriptions. If a background image contains important information, include it in the main content rather than keeping it in the background, and add the appropriate alt text. If the image is decorative, confirm during testing that it is skipped in screen reader descriptions.

In documents created in Microsoft Word, screen readers skip all headers and footers as if they were background images. Any non-decorative images (and essential text content) must be in the main page content to ensure they are read by screen readers.

Example for Background Images

Screenshot of text with background image of a keyboard. Text says

Figure 5. Example for Background Images.

Example for Document Headers

MS Word document. Header contains image of G S A logo and text

Figure 6. Example for Document Headers.

Controls, Form Elements, and Links

When possible, render controls and other navigation elements as text and avoid using images to convey navigation information. Be careful when using images with these elements to ensure they are still accessible for keyboard navigation and understandable for screen reader users.

For more guidance, see the “Additional Resources” section at the end of this guide.

Example for Controls

Box labeled

Figure 7. Example for Controls.

Example for Form Elements

Form with input fields for name and email. Email field is followed by a red asterisk as a

Figure 8. Example for Form Elements.

Bullets

Document and web content creators should add bulleted lists from the application toolbar and unordered list element respectively, and avoid manually creating bulleted (or numbered) lists. Most screen readers will read bulleted lists as “bullet,” regardless of what shape or image is used for the bullet point. If you must use an image in place of a bullet point, set the alt text to reflect that it is being used as a bullet point. In some cases, the image used for the bullet point conveys meaning, in which case the alt text should indicate that meaning. For example, if you have a list of checked and unchecked boxes, use alt text like “checkbox checked” and “checkbox unchecked.”

Example for Bullet Points

Activities Covered by Section 508

Spacers and Separators

Spacers and similar structural images are decorative and should be marked as decorative so that they are skipped by screen readers.

Lines and separators are typically decorative, especially if you are using headers to appropriately organize your content. If separators are used to convey a meaning or serve as a functional image used to initiate action or prompt a response, the alt text must provide the same information conveyed visually.

Charts, Graphs, and Diagrams

For complex images, such as flowcharts, graphs, diagrams, and infographics, follow these guidelines:

Example for Charts

Example image

Figure 9. Example for Charts.

Example for Graphs

Sample scatter plot image with title

Figure 10. Example for Graphs.

Example for Diagrams

Flow charts, decision trees, and similar diagrams must have alt text that describes the order of the actions or relationships of decisions. For screen reader users, organizational charts may be better conveyed as a bulleted list, or a graphical diagram accompanied by a bulleted list.

Sample image

Figure 11. Example for Diagrams.

Watermarks

Watermarks are not read by screen readers. If a watermark has relevant information, you must add this information to the main content. For example, if you have a watermark that says “Top Secret,” then you must indicate in the main text that the document is top secret.

If the watermark is decorative, no alt text or additional information is needed.

All watermarks should have low color contrast to make the main text readable for readers with low vision. When possible, avoid using watermarks altogether since they can obscure the main text for users with low vision.

Examples for Watermarks

A memo with a faint grey watermark that says

Figure 12. Example A for Watermarks.

A memo with a bright red watermark that says

Figure 13. Example B for Watermarks.

Signatures

When a signature is presented as an image, include the word “Signature” and the signer’s name in the alt text.

Example for Signatures

Example image

Figure 14. Example for Signatures.

Common Mistakes

Many people who write alt text for images make these common errors:

Additional Resources

Refer to the following for additional guidance on writing meaningful alt text.

Reviewed/Updated: July 2024