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)

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"
  }
}

warning[A11Y-013]: links with the text `details` go to different places
 --> page.hypra:6:17
  |
6 |     a(shoe.url) "Details"
  |                 ^^^^^^^^^
  = help: put what's different into the text, e.g. "Read more about {post.title}", set aria-label, or put each link in a list item or a card with a heading
  = docs: https://hypralang.dev/rules/a11y-013/

0 errors, 1 warning

Fixed

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.