Heading levels are sequential (no skipping from h1 to h3)

Screen reader users navigate pages by jumping between headings with shortcut keys (H in JAWS, NVDA, and VoiceOver). Skipped levels break that outline — a user lands on an h3 and cannot tell whether they missed intermediate context or whether the h2 simply does not exist. This violates WCAG 2.2 SC 1.3.1 (Info and Relationships) and SC 2.4.6 (Headings and Labels), and blocks Section 508 refresh 502.3.5 conformance required for federal procurement. Multiple h1 elements fragment the document model and confuse assistive technology about the page's primary topic.

Walk each route's rendered DOM from top to bottom and ensure heading levels never increase by more than one step. Reserve exactly one h1 per page for the primary topic and demote decorative text to a styled div or span. Example:

<h1>Pricing</h1>
<h2>Plans</h2>
<h3>Pro tier</h3>
<h2>FAQ</h2>

If the visual design calls for smaller text, control size with CSS (font-size, a utility class) — never by picking a lower heading level.

• ID: accessibility-wcag.perceivable.heading-hierarchy

• Severity: medium

• What to look for: Count all heading elements (<h1> through <h6>) across each page/route. For each page, enumerate the heading sequence and verify no levels are skipped. Count the number of <h1> elements per page.

• Pass criteria: Count all headings found per page. Heading levels are sequential on each page with no more than 0 skipped levels. Each page has exactly 1 <h1> element. No more than 0 headings are used purely for visual sizing rather than document structure. Report even on pass: "Heading hierarchy verified across N pages, M total headings found."

• Fail criteria: Heading levels skip (e.g., h1 to h3), multiple <h1> elements on a page, or headings used for visual styling rather than structure.

• Skip (N/A) when: Never.

• Detail on fail: "Page jumps from h1 to h3 in About page — missing h2 level" or "Multiple h1 elements found on the homepage — should have exactly one h1"

• Remediation: Use headings to create a logical document outline:

  // Before — skips levels
  <h1>Welcome</h1>
  <h3>Features</h3>  {/* Skips h2! */}
  <h5>Pricing</h5>   {/* Skips h3, h4! */}
  
  // After — sequential hierarchy
  <h1>Welcome</h1>
  <h2>Features</h2>
  <h3>Feature Details</h3>
  <h2>Pricing</h2>
  

  If you want smaller text, use CSS instead of a lower heading level.