Accessible Images

Understanding Accessible Images

Accessible images provide appropriate text alternatives so important visual information is available to people who cannot see the image.

The alt attribute provides a text alternative for an HTML image. Writing useful alternative text depends on the image's purpose and context: some images need a short description, some need a more detailed explanation, and purely decorative images generally need an empty alt attribute.

Why Alt Text Matters

Images can communicate information that is unavailable to someone who cannot see them. Alternative text provides a textual equivalent that can be presented by screen readers and can also provide useful information when an image fails to load.

<img src="/img/images/garden.jpg" alt="Raised vegetable beds filled with lettuce and tomato plants">

The goal is not necessarily to describe every visible detail. The alternative should communicate the information or purpose the image contributes in its particular context.

Informative Images

An informative image communicates information that contributes to understanding the surrounding content. Its alternative text should convey the important information a visitor would otherwise obtain from seeing the image.

<img src="/img/images/tomato-plant.jpg" alt="Tomato plant supported by a wire cage">

The best wording depends on why the image appears on the page. The same photograph might need different alternative text in a gardening tutorial, a photography portfolio, or an online store because its purpose is different in each context.

Decorative Images

A decorative image does not provide information needed to understand the page. Decorative borders, flourishes, background-like graphics, and images that merely repeat information already provided nearby may not need to be announced by a screen reader.

For an image element that is purely decorative, use an empty alt attribute:

<img src="/img/images/decorative-leaves.png" alt="">

The empty value indicates that the image does not need a text alternative. When possible, images used entirely for visual decoration can also be added with CSS rather than as meaningful HTML content.

Functional Images

An image is functional when it is used as part of an interactive control, such as a linked logo or image button. In this situation, the alternative text should communicate the function or destination rather than simply describe the picture.

<a href="/index.html">
  <img src="/img/images/logo.png" alt="Example Garden Center home">
</a>

The important information is that activating the image takes the visitor to the home page. Describing it only as alt="green leaf logo" would describe its appearance without explaining the link's purpose.

If an image and adjacent text are part of the same link and the text already identifies the destination, the image can often use alt="" to avoid repeating the same information.

Complex Images

Charts, graphs, diagrams, maps, and other complex images may communicate more information than can reasonably be included in a short alt value.

Use the alt attribute to identify the image and communicate its essential purpose, then provide the important details in nearby text or another accessible text-based presentation.

<img src="/img/images/rainfall-chart.png" alt="Chart comparing monthly rainfall">

<p>Monthly rainfall increased from 2 inches in April to
5 inches in May and reached 7 inches in June.</p>

The information needed to understand the chart is available as ordinary HTML text rather than being available only to visitors who can see the graphic.

Images Containing Text

Whenever practical, important text should be real HTML text rather than text embedded inside an image. HTML text can resize, reflow, be selected, translated, and adapt more easily to different user settings and screen sizes.

If an image contains text that communicates important information, the text alternative should convey the relevant message rather than merely state that the image contains words.

<img src="/img/images/sale-banner.png" alt="Garden supplies 25% off through September 30">

Avoid alternatives such as alt="sale banner" when the actual sale information is necessary to understand the image.

Captions and Alt Text

A visible image caption and alternative text serve different purposes. A caption provides information for everyone, while alternative text represents the image when it cannot be perceived visually.

<figure>
  <img src="/img/images/garden.jpg" alt="Raised vegetable beds surrounded by a wooden fence">
  <figcaption>The community garden opened in 2025.</figcaption>
</figure>

The alternative text describes relevant visual information, while the caption provides additional context. Avoid unnecessarily repeating exactly the same information in both.

Writing Useful Alt Text

Useful alternative text is determined by context rather than by a fixed formula. Consider what information would be missing if the image were unavailable and communicate that information as clearly and concisely as practical.

It is usually unnecessary to begin alternative text with phrases such as image of or picture of because assistive technology can already identify the content as an image. Mention the type of image when that distinction itself is useful, such as a diagram, map, painting, or screenshot.

Missing vs. Empty Alt Attributes

A missing alt attribute and an empty alt="" attribute do not communicate the same intention.

An empty alternative explicitly indicates that an image does not require a text alternative:

<img src="/img/images/decorative-leaves.png" alt="">

Leaving the attribute out does not provide that indication and may cause assistive technology to announce other information, such as the image filename or URL.

<img src="/img/images/decorative-leaves.png">

For ordinary <img> elements, deliberately decide whether the image needs meaningful alternative text or an empty alternative rather than simply omitting the attribute.

Accessible Image Example

The following example demonstrates informative, decorative, and functional images with alternatives appropriate to their different purposes.

<h1>Example Garden Center</h1>

<h2>Growing Tomatoes</h2>

<img src="/img/images/tomato-plant.jpg"
     alt="Tomato plant supported by a wire cage">

<p>Support tomato plants as they grow to keep the stems upright.</p>

<img src="/img/images/decorative-leaves.png" alt="">

<p>
  <a href="/index.html">
    <img src="/img/images/logo.png"
         alt="Example Garden Center home">
  </a>
</p>

Try changing the purpose of an image in the editor and then rewrite its alt value so the text alternative communicates the information or function that matters in the new context.

Best Practices

• Provide meaningful alt text for images that communicate information.
• Write alternative text according to the image's purpose and context rather than simply describing everything visible.
• Use alt="" for purely decorative images that should not be announced.
• For functional images, describe the action or destination rather than only the image's appearance.
• Provide important information from complex charts, diagrams, and other graphics in an accessible text form.
• Avoid placing important text inside images when ordinary HTML text can be used instead.
• Do not unnecessarily repeat the same information in alternative text and nearby captions or text.
• Do not rely on filenames as substitutes for intentional alternative text.

Summary

Accessible images provide an appropriate text alternative based on what the image contributes to the webpage. Informative images need meaningful alternatives, decorative images generally use alt="", and functional images need alternatives that communicate their action or destination.

The most useful alternative text is determined by context. Consider what information or functionality would be lost if the image could not be seen, then make that information available through the HTML.