SiteLint documentation and guidelines

A link and its image may not have duplicate text content

Description

The img element in HTML is used to embed images within a webpage. The alt attribute provides alternative text for screen readers and other assistive technologies. When an image is used within a link, the alt text should not duplicate the text content of the link, as this redundancy can lead to confusion and a poor user experience for users relying on assistive technologies.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers can experience confusion and redundancy when the alt text duplicates the link text.
  • Cognitive disabilities: users with cognitive disabilities may find repetitive content challenging to process and understand.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices benefit from clear and concise link text without unnecessary duplication.

Why it matters

Ensuring that the alt text for images within links does not duplicate the link text improves the accessibility and usability of the webpage. Redundant alt text can lead to a frustrating and confusing experience for users who rely on screen readers, as they will hear the same information twice. Providing clear and concise alternative text helps all users navigate and understand the content more effectively.

Coding problems and solutions

Common coding problems

  • Redundant alt text: the alt text of an image within a link duplicates the text content of the link.
  • Lack of descriptive alt text: the alt text does not provide meaningful information about the image and its function within the link.
  • Improper use of alt text: the alt text is used improperly, leading to confusion and poor user experience.

How to fix it

Avoid redundant alt text

Ensure that the alt text does not duplicate the link text.

Correct example
<a href="homepage.html">
    <img src="home-icon.png" alt="Home">
</a>
Home
Incorrect example
<a href="homepage.html">
    <img src="home-icon.png" alt="Home">
</a>
<span>Home</span>

Provide meaningful alt text

Ensure the alt text provides meaningful information that complements the link text.

Correct example
<a href="profile.html">
    <img src="profile-icon.png" alt="Profile Page">
</a>
Profile
Incorrect example
<a href="profile.html">
    <img src="profile-icon.png" alt="Profile">
</a>
<span>Profile</span>

Use concise and relevant alt text

Ensure the alt text is concise and relevant to the image’s purpose within the link.

Correct example
<a href="contact.html">
    <img src="contact-icon.png" alt="Contact Us">
</a>
Contact Us
Incorrect example
<a href="contact.html">
    <img src="contact-icon.png" alt="Contact">
</a>
<span>Contact Us</span>

Known limitations

  • Complex links: for complex links with multiple images or additional content, ensure that each element has appropriate and non-redundant alt text.
  • Dynamic content: when dynamically adding images and links, ensure that the alt text is correctly handled to avoid duplication.
  • Testing across devices: test across different devices and screen readers to ensure the alt text is appropriately handled and provides a good user experience.

Resources

Rule

  • Audit: Accessibility.
  • Standard: SiteLint.
  • Level: Best Practices.
  • Success Criteria: Not applicable.
  • ID: img-alt-duplicate-text-link