SiteLint documentation and guidelines

Adjacent text and image link have the same destination

Description

When an image is placed adjacent to a text link, the alt attribute of the image should not duplicate the text of the link. This redundancy can cause confusion and a poor user experience for users who rely on assistive technologies, such as screen readers. Proper handling of alt text and adjacent link text is crucial for maintaining accessibility.

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 adjacent to text links does not duplicate the link text improves the accessibility and usability of the webpage. Redundant alt text leads to a frustrating and confusing experience for users who rely on screen readers, as they will hear the same information twice. This redundancy can make it difficult for users to quickly understand the purpose of the link.

Coding problems and solutions

Common coding problems

  • Redundant alt text: the alt text of an image adjacent to a text 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.

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

Provide meaningful alt text

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

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

Use concise and relevant alt text

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

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

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

  • ID: img-adjacent-duplicate-text-link