# Alt text

Source: https://allyway.ai/glossary/alt-text

Alt text is a short written description of an image. Screen readers read it aloud, and browsers show it when the image can't load – so people who can't see the image still get its meaning.

## Why alt text matters

Without alt text, a screen reader has nothing to say about an image – or worse, it reads out the file name: *"IMG underscore 4031 dot jpg"*. Visitors who can't see the image miss what it shows, and links made of images lose their meaning.

Alt text also helps when images don't load, and it tells search engines what an image is about.

![Screen reader output for an image with and without alt text](https://placehold.co/1440x640/F4F4F5/A1A1AA?text=Image "How a screen reader announces an image with and without alt text.")

## Good and bad examples

**Do:** Do

`alt="Woman in a navy dress smiling against a bright wall"`

Describes what matters in this context.

**Don't:** Don't

`alt="image123.jpg"`

A file name tells the visitor nothing.

## Which alt text for which image

| Image type | What to write | Example |
|---|---|---|
| **Informative** | What the image shows that matters here | `alt="Bar chart: sales doubled in 2025"` |
| **Link or button** | Where it goes or what it does | `alt="allyWay home"` |
| **Decorative** | Nothing – leave it empty | `alt=""` |
| **Chart or map** | A short summary, details in the text | `alt="Map of our 3 stores in Vienna"` |
| **Text in an image** | The same text | `alt="Summer sale – 20% off"` |

## How to write good alt text

1. **Ask what the image does**

   Is it information, a link, or decoration? The answer decides what you write.
2. **Describe the purpose, not the pixels**

   Write what a visitor needs to know here – not every detail you can see.
3. **Keep it short**

   One clear sentence is usually enough. Many guides suggest staying under about 125 characters.
4. **Skip "image of"**

   Screen readers already say it is an image.
5. **Leave decorative images empty**

   Use `alt=""` so screen readers skip them – don't leave the attribute out.

> **Tip:** > **Rule of thumb**
> If you would describe the image to someone on the phone, that is your alt text.

## How to check your alt text

1. Right-click an image and choose **Inspect** – look for the `alt` attribute.
2. Run a [free accessibility check](https://allyway.ai/free-wcag-accessibility-scanner-for-websites) to find every image without alt text.
3. Listen to the page with VoiceOver or NVDA.

```html title="Example"
<img src="dress.jpg"
     alt="Woman in a navy dress smiling against a bright wall">
```

> **Warning:** > **Never leave the alt attribute out**
> Without it, many screen readers read the file name instead. For decorative images, use an empty `alt=""`.

## Related WCAG criteria

| Criterion | Level | In short |
|---|---|---|
| [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html) | A | Every non-text element has a text alternative |
| [1.4.5 Images of Text](https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html) | AA | Use real text instead of text in images |
| [2.4.4 Link Purpose (In Context)](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html) | A | Image links say where they go |
| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) | A | Controls have an accessible name |

## FAQ

Q: How long should alt text be?
A: Short – usually one sentence. Put longer explanations, such as chart data, in the text next to the image.

Q: Do decorative images need alt text?
A: They need an empty alt attribute (`alt=""`), so screen readers skip them.

Q: Is the title attribute the same as alt text?
A: No. Many screen readers ignore `title`, and it only shows on mouse hover. Always use `alt`.