What does this accessibility issue mean?
Issue summary: Identical anchor target and link text
Links on a webpage should have unique text content, particularly if pointing to the same URL.
Having identical link anchor targets and text combinations appear multiple times on a page can cause confusion for users who rely on assistive technologies such as screen readers when trying to distinguish between different links.
Solution:
Ensure that links with the same accessible name serve a similar purpose.
Example HTML violation: Identical anchor target and link text (WCAG Level AAA Issue)
<a href="/contact_us">Contact</a>
<a href="/contact_us_new">Contact</a>
Explanation: The above HTML violates the identical-links-same-purpose accessibility rule because it contains two links with the same accessible name, "Contact", that lead to different web pages. This can cause confusion for users who rely on screen readers or other assistive technologies to navigate the website.
How to fix the issue of identical anchor target and link text (WCAG Level AAA)
<a href="/contact_us">Contact Us</a>
<a href="/contact_us">Contact Us New Menu</a>In the corrected code, I renamed the second link to indicate that it leads to a different resource i.e., a new menu on the Contact us page. Remember, the primary purpose of this rule aims to ensure that links or buttons that have the same accessible name or text alternative are used consistently across web pages and lead to the same resource.
