What should you put in the alt attribute of an image?

Describe what the image conveys in context. Use an empty alt="" for decorative images so screen readers skip them.

HTMLAccessibility

Overview

The `alt` attribute provides a text alternative for an image. Screen readers read it aloud for visually impaired users; browsers display it if the image fails to load; search engines use it to understand image content. The right text depends on the image's purpose.

Key Points

•Functional images (buttons, links): describe the action "Submit form", "Open menu".
•Informative images: describe what the image conveys not what it looks like.
•Decorative images: use `alt=""` (empty) so screen readers skip it entirely.
•Never use "image of" or "photo of" screen readers already announce it as an image.
•Keep alt text concise (under ~150 characters). For complex images, provide a longer text description nearby.

Examples

Informative image with descriptive alt

html

<!-- Poor: describes appearance, not meaning -->
<img src="chart.png" alt="A bar chart">

<!-- Good: conveys the insight -->
<img src="chart.png" alt="Monthly active users grew 40% between Jan and Jun 2025">

Decorative image empty alt

html

<img src="divider-wave.svg" alt="">
<!-- Screen readers skip this entirely -->

Icon button describe the action

html

<button>
  <img src="search-icon.svg" alt="Search">
</button>

Pro Tip

Ask yourself: "If this image didn't load, what would the user miss?" that's your alt text. If the answer is "nothing important, it's just decoration," use `alt=""`.