Duplicate Link Text
Critical - WCAG Level A
The accessibility issue arises when multiple links on a webpage have the same visible text but lead to different destinations. This can create confusion for users, particularly for those relying on screen readers or keyboard navigation, as they may not be able to discern the purpose or destination of each link.
For users with disabilities, especially those using screen readers, identical link text can lead to a frustrating experience. Screen readers announce links based on their text, and if multiple links share the same text, users cannot differentiate between them. This can hinder navigation, increase cognitive load, and potentially lead to incorrect actions.
How to fix it:
Identify Duplicate Links: Review your HTML to find links with identical text but different URLs.
Use ARIA Attributes: Add
aria-labeloraria-describedbyattributes to each link to provide unique, descriptive text that conveys the purpose of the link. This text should be meaningful and contextually relevant.Standardize URLs: If possible, standardize the URLs so that links with the same text point to the same destination. This reduces confusion and improves predictability.
Best practices:
Ensure that the descriptive text in
aria-labeloraria-describedbyis concise yet informative. Avoid overly verbose descriptions.Regularly audit your links to ensure that they remain unique and descriptive as your content evolves.
Common mistakes:
Using generic labels like "click here" or "more info" in
aria-labelattributes, which do not provide meaningful context.Failing to update ARIA attributes when link destinations change, leading to outdated or incorrect descriptions.