# Links with the same name must have a similar purpose

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/identical-links-same-purpose
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

When screen reader users navigate a page, they often pull up a list of all links to quickly scan available destinations. If that list contains several links all labeled "Read more," there's no way to tell them apart. This creates confusion and forces users to leave the link list, find each link in context, and read the surrounding content to understand its purpose. Users who are blind or deafblind are most affected, but this issue also impacts anyone who relies on link text to understand navigation options.

This rule relates to **WCAG Success Criterion 2.4.9: Link Purpose (Link Only)**, a Level AAA requirement. It states that the purpose of each link should be determinable from the link text alone. While the related criterion 2.4.4 (Level A) allows link purpose to be determined from context, SC 2.4.9 sets a higher bar: each link's text must be self-explanatory on its own. Additionally, **Success Criterion 3.2.4: Consistent Identification** requires that components with the same functionality are identified consistently. Together, these criteria mean that links with the same name should go to the same place, and links that go to different places should have different names.

## How to Fix the Problem

The key principle is straightforward: **if two links have the same accessible name, they should serve the same purpose.** If they serve different purposes, give them distinct accessible names.

Here are practical ways to fix this:

1. **Write descriptive link text.** Instead of generic phrases like "Read more" or "Click here," write link text that describes the destination, such as "Read the accessibility policy" or "View January's meeting minutes."
2. **Use `aria-label` to differentiate links.** When the visible text must be generic (e.g., for design reasons), use `aria-label` to provide a unique, descriptive name for each link.
3. **Use `aria-labelledby`** to combine visible headings or other text with the link to form a unique accessible name.
4. **Provide meaningful `alt` text on image links.** If a link contains only an image, the image's `alt` attribute becomes the link's accessible name. Make sure it describes the link's destination.

## Examples

### Incorrect: Multiple links with the same name going to different pages

In this example, two "Read more" links appear identical to assistive technology but lead to entirely different articles:

```html
<h3>Neighborhood News</h3>

<p>Seminole tax hike: City managers propose a 75% increase in property taxes.
  <a href="taxhike.html">Read more...</a>
</p>

<p>Baby Mayor: Voters elect the city's youngest mayor ever.
  <a href="babymayor.html">Read more...</a>
</p>
```

A screen reader listing all links on this page would show two identical entries — "Read more..." — with no way to distinguish them.

### Correct: Using `aria-label` to differentiate links

By adding an `aria-label`, each link gets a unique accessible name while keeping the visible text short:

```html
<h3>Neighborhood News</h3>

<p>Seminole tax hike: City managers propose a 75% increase in property taxes.
  <a href="taxhike.html" aria-label="Read more about Seminole tax hike">Read more...</a>
</p>

<p>Baby Mayor: Voters elect the city's youngest mayor ever.
  <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">Read more...</a>
</p>
```

### Correct: Writing descriptive link text directly

The simplest approach is to make the link text itself descriptive:

```html
<a href="routes.html">Current routes at Boulders Climbing Gym</a>
```

### Correct: Descriptive `alt` text on an image link

When a link wraps an image, the `alt` attribute serves as the link's accessible name:

```html
<a href="routes.html">
  <img src="topo.gif" alt="Current routes at Boulders Climbing Gym">
</a>
```

### Correct: Image and text together in a link

When a link contains both an image and text, use an empty `alt` attribute on the image to avoid redundancy. The visible text becomes the accessible name:

```html
<a href="routes.html">
  <img src="topo.gif" alt="">
  Current routes at Boulders Climbing Gym
</a>
```

### Correct: Links with the same name pointing to the same destination

If two links genuinely go to the same place, it's fine for them to share the same name:

```html
<nav>
  <a href="/contact">Contact us</a>
</nav>

<footer>
  <a href="/contact">Contact us</a>
</footer>
```

Both links are labeled "Contact us" and both lead to the same contact page, so there is no ambiguity.

### Correct: Using `aria-labelledby` to build a unique name from existing content

You can reference a nearby heading to create a unique accessible name without adding extra visible text:

```html
<h3 id="tax-heading">Seminole Tax Hike</h3>
<p>City managers propose a 75% increase in property taxes.
  <a href="taxhike.html" aria-labelledby="tax-heading tax-link">
    <span id="tax-link">Read more</span>
  </a>
</p>

<h3 id="mayor-heading">Baby Mayor Elected</h3>
<p>Voters elect the city's youngest mayor ever.
  <a href="babymayor.html" aria-labelledby="mayor-heading mayor-link">
    <span id="mayor-link">Read more</span>
  </a>
</p>
```

The first link's accessible name resolves to "Seminole Tax Hike Read more" and the second to "Baby Mayor Elected Read more," making them distinguishable in a links list.