Heading Structure: Why Your H1-H6 Outline Matters for Accessibility

Headings are not just big text - they are the outline a screen reader uses to navigate a page. Many screen reader users move through a page by pulling up its list of headings or jumping from one to the next, the way a sighted user skims for the section they want. When headings are chosen for their size instead of their place in the structure, when levels are skipped (an h2 followed by an h4), or when a page has no h1 or several, that outline breaks. WebAIM's 2026 study found skipped heading levels on about 42% of home pages and multiple h1 elements on about 18%. This touches WCAG 1.3.1 (Level A) and 2.4.6 (Level AA). The fix is to treat headings as structure and style size separately.

Think of headings as the page's table of contents. h1 is the title, h2s are the chapters, h3s are the sections within them. A sighted reader infers this from size and weight; a screen reader reads it from the actual heading levels in the markup. If the two disagree - if a mid-page callout is an h1 because someone wanted it large, or a real section is a bold paragraph because an h2 looked too big - the table of contents a screen reader builds is wrong. This page covers what a good heading structure is, who a broken one shuts out, and how to fix it.

What a good heading structure is

Two WCAG criteria apply. Success Criterion 1.3.1 Info and Relationships (Level A) requires that structure conveyed visually - like a heading - be available in the markup, so a real section heading is an <h2>, not a styled <div>. Success Criterion 2.4.6 Headings and Labels (Level AA) requires that headings "describe topic or purpose", so the text is meaningful when read on its own. As the W3C notes, descriptive headings let users "predict what each section contains" - which is exactly what someone scanning a heading list is doing.

A sound outline looks like this:

<!-- Good: one h1, levels step down, styled with CSS -->
<h1>Trail running shoes</h1>
  <h2>How we tested</h2>
  <h2>Top picks</h2>
    <h3>Best overall</h3>
    <h3>Best on a budget</h3>

<!-- Broken: a level skipped, and a "heading" that is just big text -->
<h1>Trail running shoes</h1>
  <h4>How we tested</h4>          <!-- skipped h2 and h3 -->
<p class="huge">Top picks</p>      <!-- looks like a heading, is not one -->

Who this shuts out

  • Screen reader users, most directly. Heading navigation is one of the most-used ways they move around a page - jumping heading to heading, or by level. A broken outline means they cannot rely on it, and a page with no headings at all forces them to read or tab through everything.
  • People with cognitive and learning disabilities, for whom a clear, predictable structure makes long content far easier to follow.
  • Everyone, a little. A logical heading outline is what lets anyone skim, and it is part of how search engines understand a page too.

How common is it?

This is another case our own home-page scan understates - heading problems were not among the top failures in our State of Web Accessibility 2026 sample, partly because they are easy for a scanner to miss when a page is heading-light. The broad measure is WebAIM's million-page study: skipped heading levels on about 42% of home pages, and multiple <h1> elements on about 18%. Skipped levels in particular are one of the most common structural issues on the web.

The usual culprits

  • Headings chosen for size - an <h1> or <h3> picked because the text should look a certain size, not because of where it sits in the outline.
  • Skipped levels - an <h2> followed by an <h4>, with no <h3> between.
  • No h1, or several - a page with no clear main heading, or multiple <h1>s competing.
  • Empty headings - a heading tag with no text, often left in for spacing.
  • Fake headings - a bold or large paragraph that acts as a heading but is not marked up as one.

How to fix it

  1. Use headings for structure, not size. Pick the level by the outline; use CSS for how big it looks.
  2. One h1 that states the page's topic.
  3. Step down one level at a time - h1, h2, h3 - no skipping.
  4. Make heading text descriptive so it stands on its own in a heading list.
  5. Remove empty and fake headings - delete spacing-only heading tags, and convert bold "headings" into real heading elements.
  6. Re-test the outline - view the heading list and confirm it reads like a sensible table of contents, then re-scan.

What a scan can and cannot tell you

A scan reliably catches the structural part: skipped levels, empty headings, and a missing or duplicated <h1> are all facts about the markup. What it cannot judge is whether a heading is descriptive - 2.4.6 - because "Section 2" is a valid heading to a machine but useless to a reader. That is the human half, and it is usually quick to spot. We report the automated slice; the descriptive-text check is part of a full audit.

Common questions

Should a page have one h1? In practice yes - one h1 for the topic, then h2 and below.

Can I skip levels? No - step down one at a time; skipped levels break the outline.

Why do screen readers use headings? They are a primary navigation method - users jump heading to heading to find a section.

Does it fail WCAG? Wrong structure relates to 1.3.1 (Level A); undescriptive headings to 2.4.6 (Level AA).

Check your own site

Run a free check on your home page to catch skipped levels, empty headings, and h1 problems in about a minute. For the whole site, a full audit also confirms your headings are descriptive and the outline makes sense, and monitoring catches structure that drifts as pages are edited. For the data behind our research, read the State of Web Accessibility 2026; its closest companion is broken list structure, the other half of getting page structure right.