Headings and Page Structure: How Screen Reader Users Navigate

Updated October 26, 2026 · 7 min read

Sighted visitors scan a page by looking at it: big text, spacing, colors. People who use screen readers can't do that, so they rely on the structure underneath the visuals. Headings and landmarks are the main way they build a mental map of a page and jump to the part they need.

This guide explains what that structure looks like, how to inspect your own pages, and how to fix common problems in themes and page builders. It is general information and not legal advice. For legal questions, talk to an attorney.

How screen reader users move through a page

Most screen readers let users pull up a list of the headings on a page, or jump from one heading to the next with a single key. Many also offer a list of landmarks, which are the major regions of a page. Survey results from screen reader users have consistently shown that navigating by headings is a common way to find content, though exact figures vary by survey and year.

In practice, a user landing on a product page might:

1. Jump to the main content, skipping the navigation.
2. Move heading by heading to find "Shipping" or "Reviews."
3. Open a landmark list to reach the footer or search.

If your headings are missing, out of order, or only visual, that map is broken. The user has to read the page linearly, which is slow on a long page.

The WCAG requirements behind this

Three WCAG 2.1 success criteria cover most of this topic:

• 1.3.1 Info and Relationships (Level A): Structure that is visible on screen must also be available in the code. If text looks like a heading, it should be marked up as one.
• 2.4.6 Headings and Labels (Level AA): Headings and labels must describe the topic or purpose of the content that follows.
• 2.4.1 Bypass Blocks (Level A): There must be a way to skip repeated blocks such as the navigation. Landmarks and a "skip to content" link are common ways to meet this.

You can read the full wording in the WCAG 2.1 specification at w3.org. For a broader list of requirements, see the WCAG 2.1 AA checklist.

Heading basics

HTML has six heading levels, h1 to h6. They work like an outline.

• One main heading per page. The h1 names the page: the product name, the article title, "Contact us." WCAG does not strictly forbid more than one h1, but a single clear one is the widely recommended practice and makes the page easier to understand.
• Levels follow the outline. An h2 is a major section. An h3 is a subsection of the h2 above it.
• Don't skip levels going down. Going from h2 to h4 suggests a missing section. WCAG does not list skipped levels as a failure by themselves, but they often signal a structure problem and confuse users.
• Write descriptive text. "Delivery and returns" helps. "More" or "Click here" does not.

A clean outline for a product page might look like this:

<h1>Handmade Ceramic Mug</h1>
  <h2>Description</h2>
  <h2>Shipping and returns</h2>
    <h3>Shipping times</h3>
    <h3>Return policy</h3>
  <h2>Customer reviews</h2>

Choose the level for meaning, not for size

A common mistake is picking a heading level because of how big it looks. Headings are about structure. If a h4 looks too small or a h2 too large, change the size with CSS and keep the level that matches the outline.

Fake headings: text styled to look like headings

The most frequent structure failure is text that looks like a heading but isn't one. A screen reader announces it as ordinary text, and it never appears in the headings list.

<!-- Looks like a heading, but is not one -->
<p style="font-size: 28px; font-weight: bold;">Shipping and returns</p>
<div class="big-title">Shipping and returns</div>

<!-- Real heading -->
<h2>Shipping and returns</h2>

The reverse also happens: headings used just to make text bigger or bold, such as wrapping a promotional line or a whole paragraph in h3. That floods the headings list with noise. If it isn't a title for a section, it shouldn't be a heading.

Landmarks: the page's major regions

Landmarks mark the big regions of a page so users can jump between them. HTML5 elements create most of them automatically:

Guidelines that hold up well:

• Use exactly one <main> per page, and put the page's primary content in it.
• If you have more than one <nav>, give each a label, for example <nav aria-label="Breadcrumb">, so users can tell them apart.
• Keep content inside landmarks where practical, so nothing is left in an unnamed region.
• Landmarks complement a "skip to content" link. Many sites keep both.

<body>
  <a href="#main">Skip to main content</a>
  <header>...</header>
  <nav aria-label="Main">...</nav>
  <main id="main">
    <h1>Page title</h1>
    ...
  </main>
  <footer>...</footer>
</body>

How to inspect your own pages

You don't need a screen reader for a first pass.

Use a headings browser extension

Several free browser extensions list the headings and landmarks on a page. Look for tools that show an outline of heading levels and a landmark view. When you run one, look for:

• No h1, or several h1 elements that don't make sense together.
• Jumps such as h2 straight to h4.
• Headings that are empty or repeat the same text.
• A heading list that doesn't read like a sensible table of contents.
• Missing main, or more than one.

Use browser dev tools

In most browsers you can right-click an element, choose Inspect, and read the tag name. The accessibility tab in Chrome, Edge and Firefox dev tools shows the accessibility tree: the roles and names assistive technology receives. If your "heading" shows up as generic text, it's a fake heading.

Try a screen reader briefly

A few minutes with VoiceOver or NVDA, opening the headings list and landmarks list, is very informative. See Screen Reader Testing for Business Owners for a starting routine.

How to fix common problems

WordPress

• Your theme usually outputs the page title as the h1. Check that your page editor doesn't add a second h1 inside content.
• In the block editor, choose the level from the heading block's toolbar. Pick it by outline, then adjust size using the typography settings.
• Check theme templates and widgets. Sidebar widget titles, footer titles and "related posts" titles are often hard-coded as h2 or h4, regardless of context.
• Confirm the theme uses main, nav, header and footer. Well-maintained themes usually do, but older or custom ones may not.

See WordPress Accessibility: Themes, Plugins and What to Check for more.

Shopify and similar store platforms

Product and collection templates often set the title as h1, with section titles as h2 and h3. Problems tend to come from custom sections, announcement bars and promotional banners that use headings for styling. Check your theme's section files if the outline looks wrong, or ask your developer to.

Wix and Squarespace

Both let you set a text element's style as Heading 1, 2, 3 and so on, or as a paragraph. Make sure the label you choose matches the outline, and use the visual settings to change appearance. See Wix and Squarespace Accessibility for what the platform handles versus what you fix.

Page builders (Elementor, Divi, and others)

Page builders usually give each heading widget a "HTML tag" or "level" setting that is separate from its size. Common problems:

• Default tag on a new heading widget doesn't match your outline.
• Text widgets styled to look like headings.
• Section titles in reusable templates (headers, footers) using headings that don't fit every page.

Work through each page template once, fix the shared templates first, and then review individual pages.

A short checklist

• One clear h1 per page that describes the page.
• Headings follow a logical order without unexplained jumps.
• Every visual heading is a real heading element.
• Headings are used for titles, not for decoration.
• header, nav, main and footer are present, and there is one main.
• Multiple navigation regions have distinct labels.
• A skip link or landmarks let users bypass repeated content.

Structure problems often appear together with other issues, such as unlabeled links or form fields. Related guides include Icon Buttons Without Labels and Accessible Form Labels and Error Messages.

If you want a baseline across your whole site, you can run a free scan and keep the dated results as a record. See Why a dated accessibility audit record matters. If you've received a demand letter, read Got an ADA website demand letter? and speak with an attorney about your situation.

Frequently asked questions

Can a page have more than one h1?

WCAG does not set a hard rule against it, and HTML itself allows it. The common recommendation is a single h1 that names the page, because it gives screen reader users a clear starting point. If you have more than one, make sure each one makes sense in the page's outline.

Is skipping a heading level a WCAG failure?

Skipping levels is not listed as a failure on its own, but it often points to a structure problem under 1.3.1. For example, a missing section or a heading chosen for its size. Fixing it keeps the outline predictable for people navigating by headings.

Do I need landmarks if I already have a skip link?

They solve related problems in different ways. A skip link helps keyboard users jump past repeated content, while landmarks let screen reader users move between regions at any time. Using both is common and generally helpful.

How do I tell if my heading is real or just styled text?

Inspect the element in your browser's dev tools. If the tag is h1 through h6, or has role="heading" with a level, it's a heading. If it's a p, div or span that only looks large and bold, it's a fake heading and should be changed.

Will fixing headings make my site compliant?

No single fix does that. Headings and landmarks are one part of a larger set of requirements, and conformance depends on the whole site. This is not legal advice, so ask an attorney about your legal exposure.

Related

• WCAG 2.1 AA checklist for business websites
• Screen Reader Testing for Business Owners: VoiceOver and NVDA Basics
• WordPress Accessibility: Themes, Plugins and What to Check
• Wix and Squarespace Accessibility: What the Platform Handles vs. What You Fix

Proof of Access provides technical accessibility assessments. We are not a law firm and nothing on this page is legal advice. If you have received a demand letter or a lawsuit, talk to an attorney.