Alternative text must not repeat nearby text or captions

WCAG 1.1.1
Non-text Content

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

If the text already says it, the image’s alt should stay silent.

Why this matters and how to fix it

Why this matters

When the same information is conveyed both in an image and in nearby text, providing alt text that repeats the same text causes screen reader users to hear it twice. This adds noise, slows navigation, and increases cognitive load. Images that do not add meaning should be ignored by assistive technologies.

How to fix this issue

If surrounding text already describes the purpose of the image, use `alt=""` to mark the image as decorative. Only provide descriptive alt text when the image communicates information *not* present in adjacent text.

Automated detection · Manual review recommended

Developer guidance

This issue commonly occurs with logos, product photos accompanied by product names, and icon-labeled buttons. In design systems, clearly define when `alt` should describe meaning, and when it should be empty. Do not rely on designers to guess — enforce rules in component APIs.

Code examples

Incorrect Implementation

<img src="logo.png" alt="GetWCAG logo"> <span>GetWCAG logo</span>

Correct Implementation

<img src="logo.png" alt=""> <span>GetWCAG logo</span>

Real-World Examples

Before

<button>
  <img src="icon-download.svg" alt="Download">
  Download
</button>
<!-- Screen reader announces: "Download, Download" → redundant -->

After

<button>
  <img src="icon-download.svg" alt="">
  Download
</button>
<!-- Screen reader announces only once: "Download, button" → clean and correct -->

Manual testing

  1. 1. Turn on a screen reader (NVDA, VoiceOver, JAWS, or TalkBack).
  2. 2. Navigate to the element containing the image and related text.
  3. 3. Listen to the announcement:
  4. • Expected: Text is read only once.
  5. • Failure: The same label or name is repeated twice.
  6. 4. Inspect the image element:
  7. • If the surrounding text conveys the meaning → `alt=""` is correct.
  8. • If the image conveys *additional* meaning → write true descriptive alt text.
  9. 5. For icon buttons, verify that the accessible name comes from visible text or `aria-label`, not from both icon + text.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance