# Alt Text

> Canonical HTML version: https://rocketvalidator.com/glossary/alt-text
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Alt text (alternative text) is a short written description added to an image's HTML code that conveys the image's content and function to users who cannot see it, primarily through screen readers.

Alt text — short for **alternative text** — is a written description of an image that is embedded directly in the HTML via the `alt` attribute. When a screen reader encounters an `<img>` element, it reads the value of `alt` aloud so that a person who cannot see the image still receives the information it conveys. When an image fails to load, browsers also display the `alt` text in its place, which makes it a useful fallback for slow connections and broken links.

Writing good alt text is less about describing pixels and more about conveying the **purpose** of the image in the context of the page. An icon next to a "Download" button does not need to say "blue down arrow icon" — it probably doesn't need alt text at all, because the button label already conveys the action.

## Why alt text matters

Screen reader users cannot perceive the visual content of an image, and without alt text they have no way of knowing what an image represents. Images that lack alt text become announced as "image" or, worse, as the file name (e.g., "IMG underscore 0423 dot jpg"), which is noise rather than information.

Alt text also benefits:

- **Search engines**, which use it to understand image content and improve image search ranking.
- **Users on slow connections**, who see the alt text while the image loads.
- **Users who turn off images** to save bandwidth or reduce distractions.

## How alt text works

There are three broad categories of images, and each requires a different approach:

### Informative images

Images that convey information not already present in the surrounding text need a concise description of what the image is communicating.

### Decorative images

Purely decorative images — dividers, background textures, flourishes — should use an empty `alt=""`. This tells screen readers to skip the image entirely. Omitting `alt` altogether is **not** the same: screen readers may then announce the file name.

### Functional images

Images used as links or buttons need alt text that describes the **action**, not the image. For a magnifying-glass icon inside a search button, the alt text should be something like "Search", not "magnifying glass".

## Code examples

### Missing alt — fails WCAG 1.1.1

```html
<img src="/images/team-photo.jpg">
```

### Empty alt for a decorative image

```html
<img src="/images/flourish.svg" alt="">
```

### Meaningful alt for an informative image

```html
<img src="/images/chart-sales-q1.png"
     alt="Sales grew 32% in Q1 2026, from €1.2M to €1.6M">
```

### Redundant alt — avoid describing the image type

```html
<!-- Avoid: the words "Image of" add no information -->
<img src="/rocket.png" alt="Image of a rocket taking off">

<!-- Prefer: -->
<img src="/rocket.png" alt="A rocket taking off">
```