Skip to main content
Beta: Front-End Checklist is currently in beta. Some issues are still being fixed. Thanks for your patience.

Ensure identical links have consistent destinations

Links with the same text must point to the same destination or be distinguishable.

Utilities
Quick take
Typical fix time 10 min
  • Links with the same text should point to the same URL
  • Differentiate links that lead to different places
  • Reduces confusion for screen reader users navigating by link list
Why it matters: When links with identical text lead to different destinations, it creates confusion and unpredictability, especially for users who rely on a list of links to navigate.

Rule Details

Links that have the same text but different destinations can be confusing for all users, but especially for those using assistive technology. WCAG's link purpose guidance (opens in new tab) and WebAIM's link-text guidance (opens in new tab) both depend on that label-to-destination consistency.

Code Examples

Incorrect Implementation

<!-- Confusing: Same text, different pages -->
<a href="/report-2022">Download Report</a>
<a href="/report-2023">Download Report</a>

Correct Implementation (Unique Text)

<a href="/report-2022">Download 2022 Report</a>
<a href="/report-2023">Download 2023 Report</a>

Correct Implementation (Same Destination)

<!-- Consistent: Same text, same page -->
<a href="/contact">Contact Us</a>
...
<a href="/contact">Contact Us</a>

Why It Matters

This is ultimately a link purpose (opens in new tab) problem: when the same words point to different places, users cannot predict what each link will do from the text alone.

  • Predictability: Users expect the same text to lead to the same place.
  • Link Lists: Screen reader users often pull up a list of all links on a page. If they see "Click here" or "Read more" multiple times pointing to different things, they have no context for which is which.
  • Cognitive Load: Distinct labels reduce the mental effort required to navigate a site.

Best Practices

Be Specific: Include keywords in the link text that describe the destination.

Use ARIA when necessary: If the visual design requires short text, use aria-label or aria-describedby to provide extra context to screen readers.

<a href="/products/1" aria-label="Read more about Product Alpha">Read more</a>

Avoid "Click Here": Generic link text is a major accessibility barrier.

Exceptions

  • Evaluate the rendered experience before treating a static-code smell as a blocker; interaction timing, browser behavior, and assistive technology output often determine severity.
  • Not every secondary accessibility issue deserves equal weight; prioritize the issue that most directly blocks perception, operation, or understanding.
  • Avoid adding redundant markup or ARIA solely to satisfy a rule when a simpler semantic implementation would eliminate the issue entirely.

Verification

Automated Checks

  • Inspect the browser accessibility tree or accessibility pane for the relevant element, role, or accessible name.
  • Run an automated accessibility checker such as axe or Lighthouse where applicable.

Manual Checks

  • Test the affected UI with keyboard-only navigation and confirm the rule holds in the rendered experience.
  • Re-test one representative user flow with a screen reader if this rule affects a key interaction.

Use with AI

Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.

Check

Verify implementation

Identify any links on the page that have identical link text but point to different URLs.

Fix

Auto-fix issues

Change the link text to be unique for each destination, or ensure that identical text always leads to the same resource.

Explain

Learn more

Explain how identical link text for different destinations can mislead users, particularly those using screen readers to scan a list of links.

Review

Code review

Review the rendered markup and interactive states that affect Ensure identical links have consistent destinations. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.

Sources

References used to support the guidance in this rule.

Further Reading

Tools and supplementary material for exploring the topic in more depth.

axe DevTools
deque.comTool

Rules that often go hand-in-hand with this one.

Make links in text blocks visually distinguishable

Links within blocks of text must be distinguishable from surrounding non-link text by more than color alone.

Accessibility
Provide titles for iframes and frames

iframes and frames must have a title attribute to describe their content.

Accessibility
Provide sufficient touch target size

Interactive elements must have large enough touch targets so users with motor impairments can activate them accurately on touchscreen devices.

Accessibility
Meet minimum color contrast ratios

Text and background colors must have sufficient contrast to be readable by users with low vision or color blindness.

Accessibility

Was this rule helpful?

Your feedback helps improve rule quality. This stays internal for now.

Loading feedback...
0 / 385