Accessible Link Purpose: Ensuring Clarity in Identical Links
Rule ID: identical-links-same-purpose
Ruleset: axe-core 4.10
User Impact: Minor
Guidelines: WCAG 2.1 (AAA), WCAG 2.0 (AAA)
How to Fix the Problem
Ensure that links with identical text or accessible names lead to the same destination or share the same purpose. If multiple links contain the same label such as “Read more,” but direct users to different pages, this creates confusion—especially for screen reader users who may navigate using a list of links.
To fix this issue:
-
Make link text unique when destinations differ: If links lead to different resources, the accessible name (text or
aria-label
) must reflect that difference. -
Use
aria-label
to add context: Maintain visual simplicity while ensuring that assistive technologies provide meaningful differentiation.
Working Examples
-
With aria-labels for clarity:
-
Unique and descriptive link text:
-
Using descriptive
alt
in image links: -
Link with icon and descriptive text:
-
Block-level link (HTML5):
Tips:
-
Avoid vague links like “Click here” or “More.”
-
Provide enough context through visible text or accessibility attributes.
-
If using the same link text in multiple places, ensure each links to the same destination or function.
Why it Matters
This rule supports navigational clarity and user confidence, particularly for:
-
Screen reader users who view a list of links out of page context.
-
Keyboard-only users who rely on meaningful tab navigation.
When identical link texts lead to different destinations, it creates confusion and inefficiency, making it hard for users to decide which link to follow. By differentiating link purposes clearly, you uphold accessibility principles and improve usability for all users.
Additionally, Success Criterion 3.2.4 (Consistent Identification) stresses the importance of consistent labeling for similar functionality. This ensures a predictable, understandable experience.
Rule Description
Links with the same accessible name must serve the same purpose. If their purpose or target differs, the accessible names must be different to reflect that.
The Algorithm (in Simple Terms)
This rule checks:
-
✅ True if a native or ARIA link has an accessible name and leads to a consistent purpose.
-
🚫 Undefined if:
-
The link has no accessible name.
-
The accessible name is only symbols or emojis.
-
An ARIA-based link has no text description.
-
The rule ensures that identical link names aren’t misleading by leading to unrelated content.