Rule ID: ace-img-no-redundant-alt

Identify images whose alternative text duplicates adjacent visible text content

Blind Deafblind Best Practice

What This Rule Checks

When an image is used as part of a button or a link, the alt attribute provides a description of the image for screen readers. However, if the same text is present both in the alt attribute and the adjacent visible text, this redundancy causes screen readers to read the same content twice. This repetition can confuse users and disrupt the flow of information.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content.

Why This Matters

Redundant alt text causes screen readers to announce the same information twice, which is annoying and slows down navigation. It also suggests the developer didn’t consider the context in which the image appears.

How to Fix

Remove Redundant Alt Text: If the text adjacent to the image already describes its purpose (e.g., a link to the “Home Page”), leave the alt attribute empty by setting it to alt=””. This ensures that screen readers will not announce the same text twice.

Provide Clear Alt Text for Image Buttons: When using an image as a button (e.g., a “Submit” button), the alt attribute should clearly state the action, such as “Submit,” and not describe the image itself.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Alt text duplicates adjacent text -->
<a href="/profile">
  <img src="avatar.png" alt="John Smith">
  John Smith
</a>

Copy

Correct Markup Solutions:

Code example

<!-- Image alt is empty when adjacent text provides the name -->
<a href="/profile">
  <img src="avatar.png" alt="">
  John Smith
</a>

Copy

Common Mistakes to Avoid

Repeating the same text in both the alt attribute and adjacent visible text.
Not recognizing when an image is decorative in context.
Adding alt text to thumbnails when the caption already describes the image.

AI Auto-Fix Available

This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.

Tip: When writing alt text, describe the image’s function and meaning, not just its appearance. For complex images like charts, provide a brief alt attribute and a longer description in surrounding text or a linked resource.