Text of buttons and links should not be repeated in the image alternative

Rule Description

When button and link text is repeated in an <alt> attribute value, screen reader users will hear the same information twice, which renders the alt text meaningless and confusing.

Why this is Important

It is unnecessary and potentially confusing to have alt text for a link or image to be repeated in the text adjacent to the link or image, since it would be read twice by a screen reader. Since image buttons use alt attributes for labels, the labels must not duplicate the text next to the button. The duplication of alternative text for an image or link in the text adjacent to that image or link can cause assistive technology such as a screen reader to render this to the user as the same text repeated twice in a row, which can be confusing to blind users because alt text should describe the destination or purpose and make sense out of context of the words around it.

Compliance Data & Impact

User Impact: Critical
Disabilities Affected:
  • Blindness
  • Deafblindness
Severity: Critical
Issue Type:
  • Deque Best Practice
WCAG Success Criteria:
  • Not applicable
Section 508 Guidelines:
  • Not applicable

How to Fix the Problem

Don't put the same text in the alt text for a button or link in the text adjacent to that image or link.

Bad Example:

In this example, the icon image's alt text says "Home Page" and the text adjacent to that image also says "Home Page". In such a scenario, an assistive technology would render this to the user as "Home Page Home Page". This redundancy is unnecessary and potentially confusing.

Home Page Home Page

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

In this scenario, the icon image's alt text would be better left empty, i.e., alt="".

Image buttons use the alt attribute as the label. The alt attribute value must be provided, and it must be clear and concise and representative of the action performed when the button is activated by the user (not a description of the image itself).

Image Button Example

<input type="image" src="submit.png" name="submit" height="36" width="113" alt="Submit">

Tips on writing alt text

When writing the alt text, keep in mind that the purpose of the alt text is to relay information to blind users about the image’s contents and purpose - blind users should be able to get as much information from alt text as a sighted user gets from the image itself. alt text should give the intent, purpose, and meaning of the image.

When writing alt text, it is helpful to keep the following questions in mind:

  • Why is the non-text content here?
  • What information is it presenting?
  • What purpose does it fulfill?
  • If I could not use the non-text content, what words would I use to convey the same information or function?

Be sure that all text contained in the alt attribute is useful. Words like "chart," "image," "diagram," or image file names tend not to be very useful and thus should not be used in alt text.

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
  • ARIA
Test Reliability: Not applicable
Rule ID: image-redundant-alt