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.
What merchants should check next
Treat this term as a practical audit prompt, not just a definition. Check the storefront pages where the concept shows up in real customer journeys: product discovery, add-to-cart, cart drawer, checkout handoff, account login, and support contact flows. If the issue affects code, verify the rendered HTML and computed browser output after the theme change. If it affects copy or media, keep the merchant-facing wording accurate and easy to maintain.
Primary source: w3.org