# Images missing alt text

> Images with no alt attribute are invisible to screen readers and search engines. Add descriptive alt text (or alt="" if decorative).

_Category: Search visibility · Detector `seo` · Check `image-alt-missing` · Severity: warning_

The `alt` attribute is how screen-reader users perceive an image and how search engines (and image search) understand it. An `<img>` with no `alt` attribute is opaque to both — the user hears only “image” or the filename. AI-generated markup frequently emits `<img>` tags with a `src` and nothing else.

## Symptoms

- Screen readers announce the filename or just “image”
- Images never appear in Google Image search
- axe/Lighthouse report “Image elements do not have [alt] attributes”

## How VibeCheck detects it

The `seo` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Images missing alt text`
- **Threshold:** one or more <img> without an alt attribute

## Root causes

- Generated `<img>` tags include `src` but no `alt`
- Dynamic images render without threading through an `alt` value
- Decorative images omit `alt` entirely instead of using `alt=""`

## The fix

Give every `<img>` an `alt` attribute. For meaningful images, describe what the image conveys in context. For purely decorative images, use an explicit empty `alt=""` so assistive tech skips them — that is a valid signal, unlike a missing attribute.

### Steps

1. Add a descriptive `alt` to every content image
2. Use `alt=""` for decorative images (not a missing attribute)
3. For dynamic images, require `alt` text at the data layer

```html
<!-- meaningful -->
<img src="/chart.png" alt="Revenue grew 40% from Q1 to Q2" />

<!-- decorative -->
<img src="/divider.svg" alt="" />
```

## Framework-specific fixes

### React

JSX warns on `<img>` without `alt` when the `jsx-a11y` ESLint rule is on. Thread `alt` through from data. Next.js `<Image>` requires it too.

```tsx
<img src={photo.url} alt={photo.caption} />
// decorative:
<img src="/divider.svg" alt="" />
```

### Vue

Bind `alt` in the template; enable `vuejs-accessibility/alt-text` to catch omissions.

```vue
<img :src="photo.url" :alt="photo.caption" />
```

### Svelte

Svelte’s compiler emits an `a11y-missing-attribute` warning for `<img>` without `alt`.

```svelte
<img src={photo.url} alt={photo.caption} />
```

### Vanilla JS

Add an `alt` attribute to every `<img>` in your markup or templating.

```html
<img src="/chart.png" alt="Revenue grew 40% from Q1 to Q2" />
```

## FAQ

### Is `alt=""` ever correct?

Yes — for purely decorative images (dividers, background flourishes), an explicit empty `alt=""` tells assistive tech to skip it. That is different from omitting the attribute, which VibeCheck flags.

### What makes good alt text?

Describe the information the image conveys in context, concisely. Skip “image of” — screen readers already announce it is an image.

### Does alt text help SEO?

Yes. It helps images rank in image search and adds relevant context to the page. It is also a legal accessibility requirement in many jurisdictions.

## Related problems

- [No H1 heading](https://vibecheck.wcgw.fun/fix/missing-h1-heading.md) — Search visibility
- [Unoptimized images](https://vibecheck.wcgw.fun/fix/unoptimized-images.md) — Performance
- [Large image files](https://vibecheck.wcgw.fun/fix/large-image-files.md) — Performance
- [Missing <main> landmark](https://vibecheck.wcgw.fun/fix/missing-main-landmark.md) — AI readiness

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-image-alt-text. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt