hypra

A11Y-002: link has no text

Error: the page doesn't build until this is fixed.

A link with nothing in it is announced as just "link", or by its address read out letter by letter. It happens most with icon links: an icon that's only decoration names nothing. (WCAG 2.4.4)

Fails

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  a("/cart")
  a("/account") { img("/icons/user.svg", decorative: true) }
}
error[A11Y-002]: link has no text
 --> page.hypra:3:3
  |
3 |   a("/cart")
  |   ^
  = help: a("/about") "About us"
  = docs: https://hypralang.dev/rules/a11y-002/

error[A11Y-002]: link has no text
 --> page.hypra:4:3
  |
4 |   a("/account") { img("/icons/user.svg", decorative: true) }
  |   ^
  = help: a("/about") "About us"
  = docs: https://hypralang.dev/rules/a11y-002/

2 errors, 0 warnings

Fixed

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  a("/cart") "Cart"
  a("/account", aria-label: "Your account") { img("/icons/user.svg", decorative: true) }
}

An icon link gets its name from aria-label, or from an image with alt text that says where it goes.