A11Y-001: image has no alt text

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

Screen readers read an image's alt text in its place. Without it, many read the file name instead, like "IMG underscore 4 2 1 7 dot jpg". Search engines index alt text, and browsers show it when the image doesn't load. (WCAG 1.1.1)

Fails

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  img("/img/runner-x.jpg")
}

error[A11Y-001]: image has no alt text
 --> page.hypra:3:7
  |
3 |   img("/img/runner-x.jpg")
  |       ^^^^^^^^^^^^^^^^^^^
  = help: add alt: "..." or decorative: true
  = docs: https://hypralang.dev/rules/a11y-001/

1 error, 0 warnings

Fixed

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  img("/img/runner-x.jpg", alt: "Runner X in blue, side view")
  img("/img/stripes.svg", decorative: true)
}

An image that only decorates, like a background pattern or a divider, takes decorative: true. Hypra writes alt="" for it, which tells screen readers to skip it.