Alternative text of images should not be repeated as text

Why this is a problem

Screen readers process both the alternative text of an image and any visible text surrounding it. When these are identical, users hear something like “Home Page Home Page” — the same phrase spoken back-to-back. This redundancy is disorienting, slows users down, and adds no value. In some cases it can even be misleading, causing users to think there are two separate elements when there is only one.

This issue primarily affects blind and deafblind users who rely on screen readers to interpret page content. It is flagged as a Deque best practice and aligns with the principles behind WCAG Success Criterion 1.1.1 (Non-text Content), which requires that non-text content has a text alternative that serves an equivalent purpose — not a duplicated one.

How to fix it

The fix depends on the context:

1. Decorative or redundant images inside links or buttons: If visible text already describes the purpose, set alt="" on the image. The image becomes decorative, and the screen reader reads only the visible text.
2. Images that add unique information: If the image conveys something the adjacent text does not, write alt text that describes only the additional information — don’t repeat what’s already there.
3. Image buttons (<input type="image">): The alt attribute serves as the button’s label. Make sure it clearly describes the action (e.g., “Submit,” “Search”) and does not duplicate text placed next to the button.

Tips for writing good alternative text

• Describe the purpose or action, not the visual appearance of the image.
• Ask yourself: “If I removed this image, what words would I need to convey the same information?”
• Avoid filler words like “image of,” “picture of,” or file names — they add noise without value.
• Keep it concise and meaningful.

Examples

Incorrect: alt text duplicates adjacent link text

The screen reader announces “Home Page Home Page” because both the alt attribute and the visible text say the same thing.

<a href="index.html">
  <img src="home-icon.png" alt="Home Page" width="24" height="25">
  Home Page
</a>

Correct: empty alt on a redundant image inside a link

Since the visible text “Home Page” already describes the link, the icon is marked as decorative with alt="". The screen reader announces “Home Page” once.

<a href="index.html">
  <img src="home-icon.png" alt="" width="24" height="25">
  Home Page
</a>

Incorrect: button text duplicated next to an image button

The word “Search” appears both as the alt text on the image button and as adjacent visible text, causing duplication.

<input type="image" src="search.png" alt="Search">
<span>Search</span>

Correct: remove the redundant adjacent text

When using an image button, let the alt attribute be the sole label and remove the duplicate text.

<input type="image" src="search.png" alt="Search">

Correct: image adds unique information alongside text

If the image conveys something the text does not, write alt text that captures only the unique information.

<a href="report.html">
  <img src="chart.png" alt="Bar chart showing 40% increase in Q3" width="80" height="60">
  Quarterly Report
</a>

Here, the visible text says “Quarterly Report” while the image’s alt text describes what the chart actually shows — no duplication, and both pieces of information are useful.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type 'image'

→