img element inside a link must not use alt text that duplicates the text content of the link
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: thealt
text of an image within a link duplicates the text content of the link. - Lack of descriptive
alt
text: thealt
text does not provide meaningful information about the image and its function within the link. - Improper use of
alt
text: thealt
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.
<a href="homepage.html">
<img src="home-icon.png" alt="Home">
</a>
Home
<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.
<a href="profile.html">
<img src="profile-icon.png" alt="Profile Page">
</a>
Profile
<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.
<a href="contact.html">
<img src="contact-icon.png" alt="Contact Us">
</a>
Contact Us
<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
- MDN Web Docs – img element
- MDN Web Docs – a element
- W3C Web Content Accessibility Guidelines (WCAG) 2.1 – Non-Text Content
- Best practices for writing good alt text
Standard
- Standard: SiteLint, Best Practices
- Rule ID:
img-alt-duplicate-text-link