# Image alt text should not duplicate adjacent link or button text. When alt text repeats surrounding text, screen reader users hear the same information twice.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/text-alternatives/image-redundant-alt
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

When an image appears inside a link or button alongside visible text, and the image's `alt` attribute contains the same words as that text, screen reader users hear the content repeated. For example, a link containing a logo image with `alt="Acme Corp"` next to the text "Acme Corp" is announced as "Acme Corp Acme Corp, link." This redundancy adds noise, slows navigation, and makes the interface harder to use.

Screen readers process every piece of text content in a link or button and concatenate it into a single accessible name. The `alt` text on an image is part of that text content. If the image's `alt` duplicates the visible text already present in the same interactive element, the accessible name becomes unnecessarily repetitive. Users who rely on screen readers, particularly those navigating long lists of links or buttons, are most affected. Repeated announcements waste time and can cause confusion about whether two distinct elements are present.

This rule relates to WCAG 2 Success Criterion 1.1.1 (Non-text Content), Level A. SC 1.1.1 requires that non-text content has a text alternative that serves an equivalent purpose. When an image is decorative relative to its surrounding text, the equivalent purpose is already served by that text. In such cases, the image should have an empty `alt` attribute (`alt=""`) so it is skipped by assistive technology. If the image does convey additional meaning not present in the adjacent text, the `alt` should describe that additional meaning rather than repeat what is already there.

## How to fix it

Determine what the image adds to the link or button beyond the visible text:

- If the image is decorative or simply a visual representation of the adjacent text (such as a product thumbnail next to the product name), set `alt=""`.
- If the image conveys information not already communicated by the adjacent text, write `alt` text that describes only the new information. For example, an icon that indicates an external link might use `alt="opens in a new window"` rather than repeating the link text.
- If the image is the only content in the link or button (no adjacent text exists), the `alt` text should describe the link's purpose or destination. This situation is different from the one this rule targets, but it is worth noting as contrast.

## Examples

### Image alt text duplicates adjacent text (incorrect)

```html
<a href="/products/widget">
  <img src="widget.png" alt="Widget">
  Widget
</a>
```

A screen reader announces this as "Widget Widget, link." The image's `alt` repeats the link text.

### Decorative image with empty alt (correct)

```html
<a href="/products/widget">
  <img src="widget.png" alt="">
  Widget
</a>
```

The image is decorative in this context because the link text already identifies the destination. Setting `alt=""` means the screen reader announces "Widget, link" once.

### Image provides additional information (correct)

```html
<a href="/products/widget">
  <img src="new-badge.png" alt="New">
  Widget
</a>
```

Here the badge communicates something the text does not. The screen reader announces "New Widget, link," which gives users more information than the text alone.

### Button with icon and text (incorrect)

```html
<button>
  <img src="delete-icon.png" alt="Delete">
  Delete
</button>
```

Screen readers announce "Delete Delete, button." The icon's `alt` is identical to the button label.

### Button with decorative icon (correct)

```html
<button>
  <img src="delete-icon.png" alt="">
  Delete
</button>
```

The icon is a visual reinforcement of the button's text label. With `alt=""`, the button is announced as "Delete, button."