Alternative Text: Tips and Best Practices

In this article:

• Why Alt Text is Important
• When is Alt Text Needed
• Writing Useful Alt Text
• Examples
• Additional Resources
• How to Add Alternative Text in various apps and software

Why Alt Text is Important

Alternative text, sometimes called an image description, is a textual substitute for images in web pages and digital documents. Alternative text serves several purposes:

1. It conveys the function and purpose of the image to users who depend on screen readers. An image without alternative text doesn’t exist for a visually-impaired user.
2. It improves the experience for a user with a slow internet connection. If an image fails to load, the browser will present the alternative text visually in place of the image.
3. Search engines factor alt text into their assessment of a page’s content.

Alt text is therefore an important part of all digital content.

When is Alt Text Needed?

If an image conveys information useful for interacting with or understanding the page content, then it needs alternative text.

Examples:

• a graph or chart
• an icon image that functions as a link
• a photo pertaining to what is covered in the text content

If an image is purely decorative, then it does not need alternative text (called null alt, or alt="" in the code).

Examples:

• a decorative scroll divider
• a pretty photo added only to break up long text

Writing Useful Alt Text

Let’s assume your image is not decorative, and therefore needs alternative text. Here are some tips for writing helpful alt text:

Context and Focus

What important information does the image convey to a sighted user in the context of your page or article? That should be the focus of your alt text. Always begin your text with the most important aspect of the image, and then add in any relevant details to fill out the description.

Brevity and Style

It is best to limit your alt text to 1-3 sentences. Write clear, succinct sentences with precise language and proper punctuation. Don’t put complex formatting like bulleted lists into your alt text.

Quick Tips and Notes

• Images of text should be avoided whenever possible. But for images that have important text in them, always put that text in the alt text. An exception might be a logo with text.
• For icons that function as user interface components, the alt text should convey what the icon does, not what it looks like. For example, a typical search icon’s alt text would be “Search,” not “Magnifying glass.”
• Don’t start with “An image of…” or “A picture of…” This is redundant information because screen readers announce the presence of an image already. Exceptions might be specifying that an image is a painting or a sketch, perhaps in the context of an art lesson or another situation where that info is important.
• If you use a caption or describe an image in the main text, don't repeat the same text in the alt text attribute. This will be read out twice by a screen reader.

Examples

Here are some alt text examples and variations using images related to accessibility.

Informative Image 1: Braille Device

Alt Text:

A person’s hands operate a computer using a refreshable braille device and a standard keyboard.

Notes:

If this were in an article about the different braille devices available, you might specify that this is an electronic notetaker with braille display. You might even name the brand. But in the context of a general article about accessibility, that information is extraneous.

Photo by rivage on Unsplash.

Informative Image 2: Service Dog

Alt Text:

A man and a black service dog on a leash walk through a sunny airport. The dog is wearing a yellow harness that says “Canine Companions.”

Notes:

What the dog is wearing is described, but not what the man is wearing. The focus of this image is clearly on the dog.

This photo was part of a series taken in an airport setting. Although that information might not be obvious or important in all contexts, it is included here because doing so doesn’t add too many words to the alt text.

Photo by Jeswin Thomas on Unsplash.

Complex Image: Line Graph

Alt Text:

A line graph depicting screen reader use by percentage on the y-axis, over the time period of January 2009 to January 2024, on the x-axis. The data in the graph is described in more detail in the main text of the article.

Notes:

The important information not covered in the alt text should be summarized or described within the text of the article. For example:

The 2024 screen reader usage survey results show that JAWS, long the most popular screen reader, has fallen to 60% use in January 2024, which is below NVDA’s 65%. This is only the second time over the last 15 years that JAWS has not been the most popular. VoiceOver, which started out at below 10% use back in 2009, has risen to just above 40% in 2024. Narrator was only included in the survey starting in 2017, when it had 20% use. As of 2024 it is up to 38%.

Additionally, the raw data can be provided in a table that is fully accessible to screen readers, without the interpretation typical of a summary.

Complex Image: Cartwheel Galaxy as captured by the Webb Space Telescope

Occasionally, an image’s purpose is to just be beautiful and awe-inspiring, and visually-impaired people shouldn’t be left out. When the Webb Space Telescope started sending back images in 2022, NASA understood that short, dry alt text couldn’t possibly convey their beauty. NASA provided rich, detailed, scientifically-accurate alternative text so visually-impaired people could appreciate the complexity and wonder of the universe too!

Image and text description courtesy of NASA; CC by 2.0

Image Description by NASA:

A large galaxy on the right, with two smaller companion galaxies to the left 10 o’clock & 9 o’clock. The large galaxy dominates the frame. It resembles a ghostly wheel with diffuse blue-white spokes revolving around a glowing core. The outer edges of the wheel are faint dots of yellow, pink and blue, with some gaps in between. The bottom right edge is marked by a large 8-pointed star. The smaller galaxies on the left look very different from each other. The top galaxy appears to be constructed of the same yellow, pink, & blue speckles as the larger galaxy’s outer ring, with a similar light blue core. Its shape is less recognizable as a spiral; it looks like a chaotic oval smattering of dots. The galaxy below it glows blueish, but its nucleus and spiral structure are apparent, and we are looking at it face-on. Sprinkled in the black background are specks of pink, blue, yellow & orange, which are distant galaxies.

How to Add Alternative Text