Check a Page's Heading Order Before Anyone Screen-Reads It — Free
Heading order is invisible to sighted reading and obvious to a screen reader, which navigates by headings and regions. Listing them in markup order, with the checks marked per row, finds the skipped level, the second H1 and the heading that describes nothing — all of which are two-minute fixes once they are visible in a list.
The proof surface
Free path: the card computes locally in the browser with no key and no account. Where an AI step helps, any free chat assistant works — Google AI Studio's free tier and Groq's free tier were both no-card and rate-limited when this page was reviewed on 2026-09-13 (limits change; check before you rely on them).
Why the flat version breaks
A visual page can look perfectly structured with a heading order that makes no sense: three H1s, a decorative H4, and section titles written as bold paragraph text. The list is the only view where that becomes obvious.
How to run the audit in four passes
Not the order they appear visually. Order in the source is what a screen reader follows, and the two differ more often than anyone expects on a page built with grid layouts.
Sequence, single H1, descriptive text, real heading element, landmark region. A row with no numbers is the finding; a row marked on hope is worse than a row left empty.
Heading order repairs cascade: correcting an H4 to H3 fixes every heading beneath it. Working from the top down is what keeps a page from being re-audited three times.
The list finds order problems quickly. Hearing the page navigated by heading is the check that catches the headings that pass every rule and still describe nothing useful.
SAMPLE DATA, NOT A VERIFIED CLAIM: Catchment report page · six headings · one skipped level · one styled-text heading · audited 19 Oct 2026. Replace these values with your own source before you rely on anything.
What breaks first
Styling text into headings
Bold paragraph text is not a heading, and no amount of size makes it one. If it introduces a section, it should be a heading element at the right level.
Using heading levels for size
Choosing H4 because it looks right visually breaks the sequence for everyone navigating by structure. Levels carry hierarchy; CSS carries size.
Auditing the homepage only
Template problems live in every page. Once a row pattern is found in one page, the same fix usually applies to the whole template, which is where the real time saving is.
What you pay otherwise
| The usual route | What it leaves out | Cost |
|---|---|---|
| A blocked navigation path | A screen-reader user unable to skim the page by heading | the page, for that reader |
| A compliance finding | An accessibility audit that costs more than the fix | an audit and a remediation sprint |
| Retrofitting a template | Fixing heading structure across a hundred pages one at a time | weeks of edits |
| This page + the free heading outline grid | Computed in your tab, result on screen before you type anything | $0 |
Try the free heading outline grid
Six headings are already checked against the five-part key, with one row passing nothing. Add the missing numbers and the wash band clears.
Open the free heading outline grid →Keep the work if you will use it again
Every heading in order, the five checks per row and the failing rows in a wash band, with no account.
Every heading, the check key and the failing rows stay free. The one-time tier adds the printable audit grid plus the saved audits behind it.
Boundary: This checks the heading order you transcribe; it is not a compliance audit and it does not test the page. Screen reader behaviour, landmark rules and any legal standard depend on the whole document — verify with a real screen reader and, where relevant, a qualified auditor.