A11Y-006: heading level skipped

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

Screen reader users move through a page by its headings, and the levels are its outline: an h3 right after the h1 sounds like a section is missing. Pick the level by the structure, and the size with CSS. (WCAG 1.3.1)

Fails

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  h3 "Trail shoes"
  p "Grip for wet rock and mud."
}

warning[A11Y-006]: h3 follows h1, skipping a level
 --> page.hypra:3:3
  |
3 |   h3 "Trail shoes"
  |   ^^
  = help: use h2; screen readers navigate by heading levels
  = docs: https://hypralang.dev/rules/a11y-006/

0 errors, 1 warning

Fixed

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  h2(class: "text-base") "Trail shoes"
  p "Grip for wet rock and mud."
}