Images of text

Whenever possible, avoid text in images unless the image is a logo or a screenshot of a user interface. For simple images of text, the text alternative should contain the same words as in the image. For more complex images of user interfaces that include text, refer to Complex images.

Transcribe any embedded text that meets the following criteria:

• The text is relevant to the subject matter.
• The text is not already written out in full in a description that accompanies the image.
• The text is not purely decorative.

If the image is accompanied by a detailed description, then provide only a brief summary in the alt text. Because screen readers read out the description, image caption, and alt text, avoid repeating the same information to prevent redundancy. For users without screen readers, the description text is always visible.

If the image also functions as a link without any accompanying link text, then refer to Functional images.

tip

For help with writing alt text for a particular image, post in the #talk-accessibility Slack channel.

Example images of text

The following sections provide example images along with their suggested alt text and code examples.

Example 1: Image containing logos

The following image is a cover image on a blog post that helps to illustrate the story and make it more engaging for the reader. The textual portion consists of the logos of the two companies discussed in the article, against a background of visual effects produced by Wētā Digital.

Source: Welcome, Wētā Digital! (Unity Blog).

Suggested alt text:

Unity logo and Wētā Digital logo in white with a closeup image of a photorealistic chimpanzee in the background.