# A11Y-013: same link text, different places

**Warning**: the page still builds, but this is most likely a mistake.

Screen reader users often go through a page's links as a list, where only the text tells them apart. Ten
links called "Details" that go to ten different shoes all sound the same.
([WCAG 2.4.4](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context))

## Fails

```hypra fails
page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  props(shoes: List)
  h1 "Shoes"
  for shoe in shoes {
    p "{shoe.name}"
    a(shoe.url) "Details"
  }
}
```

## Fixed

```hypra passes
page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  props(shoes: List)
  h1 "Shoes"
  for shoe in shoes {
    p "{shoe.name}"
    a(shoe.url) "Details about the {shoe.name}"
  }
  ul {
    for shoe in shoes { li { "{shoe.name}: " a(shoe.url) "Details" } }
  }
}
```

Either the text says which one, or the element around the link does, as WCAG allows: a list item, a table
row, or an `article` or `section` with a heading. An `aria-label` like `"Details about {shoe.name}"` works
too.