Alt text must not duplicate link text

Alt text must not duplicate adjacent link or button text

The text alternative for an image must not repeat visible link or button text next to it.

This often happens with icon+text links, image buttons, or decorative images next to labels.

It affects screen reader users who hear the same words twice and anyone using braille displays.

Why It Matters

Redundant announcements slow navigation and increase cognitive load. Screen reader users may hear “Home, graphic Home, link,” which is noisy and confusing.

Braille users get repeated labels that waste space on the display.

Clear, concise names help users find the right action quickly and reduce errors.

Common Causes

• Image and text inside the same link, with the image alt repeating the link text.
• Decorative or status icons (e.g., home, external, required) given meaningful alt text.
• input type="image" used as a submit button plus a visible, duplicate text label.
• Templates/CMS auto-filling alt from filenames or titles identical to link text.
• Adding multiple naming sources (alt + aria-label + visible text) that echo the same words.

How to Fix

1. Decide the image’s role:
   • If the image is decorative or repeats adjacent text: use empty alt (alt="").
   • If the image is the only content conveying purpose: provide a meaningful alt.
2. Links with icon + visible text (same destination):
   • Keep the visible text as the accessible name.
   • Set the image alt to empty: alt="".
3. Buttons:
   • <button> with icon and visible text: keep the text; set the nested image alt="" (or hide an SVG with aria-hidden="true" and focusable="false").
   • input type="image": use a clear action in alt (e.g., "Search"). Avoid adding a separate duplicate text label.
4. SVG and icon fonts:
   • If purely decorative or redundant: aria-hidden="true" and focusable="false" (SVG). Do not provide a title or desc.
   • If informative: ensure only one name source (e.g., aria-label on the parent control), and avoid additional duplicate text in the SVG.
5. Authoring guidance:
   • Ensure every <img> has an alt attribute. Use alt="" for decorative cases.
   • Do not rely on title attributes for names; they are inconsistently announced.
   • Update CMS/templates so icon images in links/buttons default to alt="" unless they provide unique meaning.

How to Test

Keyboard check:

• Tab through links and buttons. Confirm each control has one clear, concise name and no extra focusable graphics.

Screen reader check (NVDA/JAWS/VoiceOver):

• For icon+text links, confirm only the text label is announced once.
• For image-only links/buttons, confirm the alt communicates purpose (e.g., target page or action).
• Ensure decorative icons are skipped.

Mobile/touch check (TalkBack/VoiceOver):

• Swipe through interactive elements. Listen for single, non-redundant labels.

Quick inspection:

• In DevTools, verify <img> alt values: alt="" when adjacent text already provides the name; meaningful alt when the image is the only label.
• For inline SVG icons, confirm aria-hidden="true" and focusable="false" if decorative.

Good Example

<a class="nav-link" href="/home">
  <img src="/icons/home.png" alt="" width="20" height="20">
  <span>Home</span>
</a>

<form action="/search" method="get">
  <input type="image" src="/icons/search.png" alt="Search" width="24" height="24">
</form>

Bad Example

<a class="nav-link" href="/home">
  <img src="/icons/home.png" alt="Home" width="20" height="20"> Home
</a>

<!-- Duplicate label next to an image submit button -->
<input type="image" src="/icons/search.png" alt="Search"> <span>Search</span>

Issues: The link announces “Home” twice. The image submit announces “Search” and the adjacent text repeats it.

Quick Checklist

• Do not repeat visible link or button text in an image’s alt.
• Use alt="" for decorative or redundant images (including icons) near text labels.
• Provide meaningful alt only when the image is the sole label for a control.
• For icon+text buttons/links: text provides the name; hide the icon from assistive tech.
• For input type="image": alt conveys the action; avoid adjacent duplicate labels.
• Avoid stacking name sources (alt + aria-label + visible text) that echo each other.
• Never rely on title attributes for accessible names.