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: thealt
text of an image adjacent to a text 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.
Provide meaningful alt
text
Ensure the alt
text provides meaningful information that complements the link text.
Use concise and relevant alt
text
Ensure the alt
text is concise and relevant to the image’s purpose within the link.
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
Rule
- ID:
img-adjacent-duplicate-text-link