Back to Top

Everything You Need to Know About ALT Text

Share on

Copy Link
Quick Summary:

Making the right choices for alternative, or “alt” text for image assets is essential to delivering an accessible website experience to all users, including those with vision impairments. This article explains the fundamentals of great alt text for images.

What is alternative “alt” text?

Put simply, alternative text (or “alt text”, as it is commonly referred) is a text substitute for non-text content. Most frequently, it is used as an accessibility aid for photographs, graphics and other media on web pages. Vision-impaired users, many of whom rely on screen reading software, may have difficulty perceiving this media directly. Alt text allows us to convey the ideas, emotions or information contained within a media asset to vision-impaired users through descriptive text.

Screen readers audibly announce alt text when they are processing the contents of a web page. It is considered to be part of the content, and so it is read to the user as it is encountered within the page content. Search engines also take advantage of alt text, using it to further understand the purpose, meaning and content of web pages.

Making the right choices when it comes to alt text, then, is essential to delivering a first-class experience for all of your website visitors, including search engines.

Decorative Images

Before you go about crafting perfect alt text, it’s important to evaluate if a given image has meaningful information to convey in the first place. If it does not communicate anything of value, then it is considered to be decorative. Decorative images do not require alt text. In fact they are required to have empty alt text.

Ask yourself: if this image were removed or could not be used, would important information be lost? Would the rest of the content still be able to stand on its own? If the answer to these questions is yes, then the image is decorative. Here are some other characteristics of decorative images:

  • They may be used as part of page design or placed in the background
  • They may be used only for visual effect (“eye candy”)
  • Stock images are generally decorative

The following images are good examples of decorative images in most contexts. They generally don’t contribute any additional meaning to the content of the page. Adding alt text to decorative images can actually degrade the accessibility experience. It adds no real value to the visitor.

There is no suitable alt text or caption for this image.
There is no suitable alt text or caption for this image.
There is no suitable alt text or caption for this image.

Informative Images

If an image is not decorative, it’s probably informative. Informative images are generally trying to communicate something. Sometimes it is an impression or an emotion. Other times it is more concrete, like the size of the Big Beach Breakfast at the local diner.

Informative images may also be used to supplement other information. For example, a product photo on an online store would typically accompany a text description.

Caption or alt text?

A properly formatted image caption is a valid substitute for alternative text. When should you use captions instead?

  • If the image is part of paragraph content, use a caption and treat the image as Decorative (empty alt text). Then all of your website visitors will be able to see the caption, including those using assistive technologies.
  • If the image is not part of paragraph content, but is instead part of a more complex layout, use alt text. Captions typically aren’t visually suitable for stylized layouts.

An important thing to keep in mind when it comes to captions and alt text: don’t use them at the same time, as screen readers will read both to the user.

Many informative images are trying to convey a feeling, an ambience or an appeal to the senses. Don’t just describe the image – that’s boring. Instead, tell the story that the image is trying to tell:

Suitable alt text or caption: The nearby walking trail offers expansive views of the surrounding mountains, and boardwalks to make the journey light and easy.
Suitable alt text or caption: An explosion of colour from powdered chalk covers festivalgoers from head to toe.
Suitable alt text or caption: The mountain burger at ACME Burgers is so tall, it’s held together with a steak knife right down the middle.

Functional Images

Functional images are triggers for an action of some kind, like printing a page, downloading a report, or navigating back and forward in a series of related pages. In most cases, you should set the alt text for a functional image to reflect the associated action, like Download report or Print this page:

Suitable alt text: Print this page
Suitable alt text: Download Report
Suitable alt text: Next page

Logos as Functional or Informative Images

Logos may be considered to be functional images. For example, when placed in the header of a website, it’s a common convention to link the logo to the home page. In these situations, the logo is considered to be a functional image. When placed within page content, logos often link externally to the websites of the respective companies represented in the logos.

In either case, the best choice of alt text in these situations is something like [Name of Company] logo.

Images of Text

Some images have text within them as part of the image itself. When working with stylized graphics containing text, it’s best to include equivalent text content elsewhere on the page.

Example 1: Equivalent text is not included elsewhere

Suitable alt text or caption: Live to Rock Tour with Skid Row, Warrant & Winger, rescheduled to July 28, 2022.
Suitable alt text or caption: Bubbles for Mayor 2020, brought to you by the Trailer Park Boys Animated Series on Netflix.
Suitable alt text or caption: Windsor Spitfires 2021-22 Schedule

Example 2: Equivalent text is already included elsewhere

If the information contained in an image is already included nearby on the page, you may be able to treat the graphic as purely decorative and include empty alt text. Or you can take the opportunity to communicate by adding informative alt text:

Suitable alt text or caption: Three titans unite for an epic throwback to the best of 80s and 90s metal
Suitable alt text or caption: Brought to you by the Trailer Park Boys Animated Series on Netflix
Suitable alt text or caption: Get your OHL #gameon with the Windsor Spitfires

Complex Images

Complex images are things like charts and maps. The most important characteristic of a complex image is that it contains more information than can be effectively communicated in alt text, which is generally meant to be short and brief.

For charts, it’s best to include a corresponding table of the results below the chart, and then refer to that table in the alt text for the image. An example alt text for an image of a bar chart might be Summary of Job Posts by Month, April 2021 through March 2022. See table below for results.

Maps are more nuanced. They’re meant to be visually explored, but there can be ways to improve their accessibility. You can provide walking, transit or driving directions as an accompaniment to the map, if that’s what you’re trying to communicate. For Google Maps, research indicates that visually impaired users are big users of the Google Maps mobile app, so linking the image to a Google Map can be helpful.

General Alt Text Tips & Best Practices

  • Stick to 1-2 sentences. They say a picture is worth a thousand words, but alt text is meant to be succinct.
  • Avoid prefixing your alt text with “An image of…” or “Photo of…”. Screen readers will announce it as an image. There’s no need to add these words.
  • Keep alt text conversational – use proper sentences, not keywords or phrases.
  • Describe what’s relevant for the context, meaning and intent.
  • Include emotion and humour if it’s relevant.
  • If you need a longer description, write a brief summary in the ALT text, and include the full description underneath the image.

Alt Text Decision Tree Infographic

This downloadable high-resolution infographic walks you through the decision-making process for choosing the right alt text.

You might also like

Share on

Copy Link

About the Author

Renee Pomerleau is an experienced design and UX professional focused on humanizing technology to improve the world around us.

Don't miss out on future articles!

Useful tips for website owners and content managers, delivered once a week.


About the Author

Renee Pomerleau is an experienced design and UX professional focused on humanizing technology to improve the world around us.

Don't miss out on future articles!

Useful tips for website owners and content managers, delivered once a week.