Heading structure is the outline of a page built from <h1> through <h6> tags, and landmarks are the semantic regions — header, nav, main, footer — that frame it. Together they let screen-reader users understand and jump around a page in seconds, and they’re a core WCAG 2.1 AA requirement.
Why headings and landmarks matter
Sighted visitors scan a page in a glance: a big title, bold section names, a menu up top, a footer at the bottom. People who use a screen reader can’t see that layout. Instead, assistive technology like NVDA, JAWS, or VoiceOver builds a navigable model of the page from your HTML. If your markup carries real structure, the screen reader can announce “heading level 1,” “main region,” “navigation,” and let the user leap directly where they want.
When structure is missing — headings faked with bold <div>s, no <main>, a wall of unlabeled content — the screen reader has nothing to navigate. The user is forced to listen linearly from the top of the page, every time. That’s slow, exhausting, and one of the most common barriers cited in web accessibility complaints and ADA demand letters.
Both pieces map to WCAG success criterion 1.3.1 Info and Relationships (Level A) and 2.4.6 Headings and Labels (Level AA), which sit under the POUR principles — Perceivable, Operable, Understandable, Robust. They also align with Section 508 and the ADA Title III expectations the DOJ points to for the public web.
How screen-reader users navigate by heading
Heading navigation is one of the most-used features in screen readers. Common shortcuts include:
- H — jump to the next heading of any level
- 1–6 — jump to the next heading at a specific level
- Insert + F6 (JAWS) or the rotor (VoiceOver) — list every heading on the page at once
That last one is the key insight: many users pull up a list of all headings and use it as a table of contents. If your outline is clean, they can read your whole page structure in a few seconds and dive into the part they need. If you skipped levels or scattered <h1>s everywhere, the list is gibberish.
The rules of a clean heading outline
A correct outline follows a few simple, testable rules.
| Rule | Do | Don’t |
|---|---|---|
| One h1 per page | <h1> names the whole page | Multiple <h1>s or none |
| No skipped levels | h2 → h3 → h4 | h2 → h4 |
| Headings reflect meaning | Use levels for hierarchy | Pick levels for font size |
| Real heading tags | <h2>Section</h2> | <div class="big">Section</div> |
| Visible labels match | Heading text describes the section | Vague labels like “More” |
One h1, used once
The <h1> is the page’s title — the single most important label on it. Use exactly one. Your site logo or brand name usually does not belong in the <h1>; the <h1> should describe this page’s topic. On a guide like this, the <h1> is the article title.
Don’t skip levels
Think of it as a nested list. An <h2> opens a major section; an <h3> opens a subsection inside it. Jumping from <h2> straight to <h4> tells assistive technology there’s a missing layer of structure, which confuses the outline. Drop back to the correct level instead of choosing a tag because it looks the right size — that’s what CSS is for.
Style with CSS, not heading levels
A frequent mistake: picking <h4> because the designer wants smaller text. Never choose a heading level for its appearance. Choose the level that reflects the content’s place in the hierarchy, then style it however you want. Visual size and semantic level are independent.
HTML5 landmark regions
Landmarks are the second half of structure. They divide the page into named regions that assistive technology can list and skip between. Use the native HTML5 elements first — they carry an implicit ARIA role automatically.
| Element | Implicit role | Purpose |
|---|---|---|
<header> | banner | Site header (top-level) |
<nav> | navigation | A set of navigation links |
<main> | main | The primary content (one per page) |
<aside> | complementary | Sidebar / related content |
<footer> | contentinfo | Site footer (top-level) |
<form> | form | A labeled form region |
<section> | region | A labeled standalone section |
A few practical guidelines:
- Use one
<main>per page, wrapping the unique content. This is what powers a “skip to main content” link. - If you have multiple
<nav>s (primary menu and footer menu, say), give each an accessible name witharia-labelso users can tell them apart — e.g.aria-label="Primary"andaria-label="Footer". <header>and<footer>only count asbannerandcontentinfolandmarks when they’re top-level — not when nested inside an<article>or<section>.- Don’t wrap the whole page in generic
<div>s. A<div>has no role and creates no landmark.
When ARIA landmark roles help
Reach for native elements first; they’re more robust and need less code. But ARIA landmark roles are useful when the native element isn’t available or you need to name a region. For example, role="search" has no HTML element equivalent and is the correct way to mark a site search form. The first rule of ARIA still applies: don’t add a role to an element that already has it. Putting role="navigation" on a <nav> is redundant, and redundant ARIA is a common source of audit findings.
Headings, landmarks, and SEO synergy
The same semantic markup that helps screen readers helps search engines. A clear <h1> and a logical heading outline tell crawlers what your page is about and how it’s organized, which supports rich snippets and featured-answer eligibility. Landmarks reinforce the document’s structure. This is the practical payoff of building accessibly: you’re not trading SEO for compliance — you get both. We cover the overlap in depth in how accessibility improves SEO.
How to check your own pages
You can run a quick manual audit without special tools:
- Read the outline. Use a browser extension or your screen reader’s heading list to view headings as a nested list. Does it read like a sensible table of contents?
- Count the
<h1>s. Exactly one, describing the page. - Look for skipped levels. No jumps like
h2→h4. - List the landmarks. Confirm there’s one
<main>, a<nav>, and that header/footer are present and named where needed. - Test with a keyboard and a screen reader. Tab through and listen. Can you reach the main content quickly? Does each region announce correctly?
Automated checkers catch missing <main> and skipped levels, but they can’t judge whether a heading means the right thing. That judgment is why manual accessibility testing matters — and why no accessibility overlay can reliably fix structure for you. An overlay can’t know that your “About us” heading is really a top-level section; correcting the outline means editing the actual HTML.
Getting it fixed
Heading and landmark problems are among the most common — and most fixable — issues in a website accessibility audit. Because they live in your templates, fixing them once usually corrects the issue site-wide. If you’d rather not rebuild the outline yourself, Curbcut’s accessibility remediation service repairs structure by hand as part of full WCAG 2.1 AA conformance — or start with a free scan to see where you stand.
This guide is general information, not legal advice. For questions about ADA exposure, a demand letter, or a lawsuit, consult a qualified attorney. Authoritative standards live at the W3C Web Accessibility Initiative and ADA.gov, with practical testing guidance from WebAIM.