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.

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)

<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)

<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)

<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)

<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)

<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."

Learn more:

W3C Reference

Understanding Non-text Content (WCAG 2.1)

→

W3C Reference

H2: Combining adjacent image and text links for the same resource

→

MDN Reference

img: The Image Embed element

→