Heading hierarchy
Heading hierarchy is the nested structure of `<h1>`–`<h6>` elements on a page. A correct hierarchy starts at `<h1>` (one per page), nests `<h2>` sections inside, then `<h3>` subsections, without skipping levels.
Detailed explanation
Screen-reader users navigate by heading. JAWS, NVDA, and VoiceOver all expose a "headings list" keyboard shortcut (`H` key in browse mode for JAWS/NVDA; rotor for VoiceOver). A correct hierarchy lets the user jump to the next major section in one keypress; a broken hierarchy (skipping from `<h2>` to `<h4>`) confuses the reader and indicates that the visual styling chose the heading level instead of the document outline.
WCAG 2.1 SC 1.3.1 (Info and Relationships) at Level A requires programmatic heading structure. SC 2.4.6 (Headings and Labels) at Level AA additionally requires that the heading text be descriptive of the content that follows.
How this applies to Shopify stores
Shopify themes are notorious for using `<h2>` as a styling token (large bold text) on collection pages, breaking the hierarchy. AccessComply detects skipped heading levels per page and reports them as 1.3.1 failures.
Primary source: w3.org