How to Fix Heading Structure Problems for Screen Readers and SEO

Headings are not just large bold text. They are the structure of a page. A good heading hierarchy helps visitors scan the page, understand what it covers, and jump to the section they need. It also helps screen reader users navigate efficiently. Many screen reader users open a list of headings and move through a page by heading level. If the headings are missing, skipped, vague, or used only for visual styling, the page becomes harder to understand.

Heading structure also matters for SEO. Search engines do not need a perfect academic outline, but clear headings make content easier to parse. A well-structured article usually has a clearer topic, stronger sections, and better internal organization. That helps users and search systems understand what the page is actually about.

The most common mistake is using headings for appearance instead of meaning. A paragraph becomes an h2 because the designer wants it to look large. A card component uses h3 everywhere because the style looks right. A page has multiple h1 elements because reusable hero sections each render their own title. A pricing-card title is a div styled like a heading. A blog post jumps from h2 to h5 because the smaller heading looked better.

ADA CodeFix flags heading structure issues because they are common, easy to miss, and often easy to improve. This guide explains how headings work, how they relate to WCAG, how to fix skipped levels and fake headings, and how to build reusable components without breaking the page outline.

This article is educational and is not legal advice. Fixing headings is one important accessibility step, but it does not guarantee legal compliance or full WCAG conformance. For legal guidance, consult qualified counsel. For accessibility conformance, combine automated scans with manual testing.

What heading structure means

HTML has six heading levels:

<h1>Main page title</h1>
<h2>Major section</h2>
<h3>Subsection</h3>
<h4>Nested subsection</h4>
<h5>Detailed subheading</h5>
<h6>Deep subheading</h6>

The heading level should describe the structure of the content, not the font size. A typical guide might look like this:

<h1>How to Fix Color Contrast Issues</h1>

<h2>What color contrast means</h2>

<h2>WCAG criteria related to contrast</h2>
<h3>WCAG 1.4.3 Contrast Minimum</h3>
<h3>WCAG 1.4.11 Non-text Contrast</h3>

<h2>Common color contrast failures</h2>
<h3>Light gray body text</h3>
<h3>Low-contrast buttons</h3>

This creates a logical outline. The h1 identifies the page. The h2 elements identify major sections. The h3 elements identify subsections inside those sections.

WCAG criteria related to headings

WCAG 1.3.1 — Info and Relationships

If headings visually communicate structure, that structure should also be programmatically available. A heading that only looks like a heading but is marked up as a div may not communicate structure to assistive technology. Screen readers rely on semantic markup to expose the outline of a page. When a visual heading is wrapped in a generic element, keyboard and screen reader users lose a critical navigation cue.

WCAG 2.4.6 — Headings and Labels

Headings and labels should describe topic or purpose. A heading like "More" or "Information" may be too vague if it does not help users understand the section. Descriptive headings allow users to predict what is in a section before reading it, which reduces cognitive load and helps people who are scanning the page.

WCAG 2.4.10 — Section Headings

This AAA criterion encourages using section headings to organize content. Even when AAA is not the target, clear section headings are a strong usability practice. Breaking longer articles into well-titled sections helps everyone find and return to the part they care about.

Common heading problems

Problem 1: Fake headings

A fake heading is text that looks like a heading but is not marked up as one.

<div class="section-title">Pricing plans</div>
<p>Choose the plan that fits your website.</p>

Better:

<h2 class="section-title">Pricing plans</h2>
<p>Choose the plan that fits your website.</p>

If the text introduces a new section, it should often be a real heading.

Problem 2: Headings used only for font size

Problem:

<h2 class="big-text">Start your free scan</h2>
<h5>AI-generated accessibility fixes</h5>

The h5 may have been chosen because it looked visually smaller. Structurally, it may belong as an h3.

Better:

<h2 class="big-text">Start your free scan</h2>
<h3 class="smaller-heading">AI-generated accessibility fixes</h3>

Use CSS for visual size. Use heading levels for structure.

.smaller-heading {
  font-size: 1rem;
  font-weight: 700;
}

Problem 3: Skipped heading levels

A page may jump from h1 to h4:

<h1>Website Accessibility Guide</h1>
<h4>Forms</h4>
<h4>Navigation</h4>

Better:

<h1>Website Accessibility Guide</h1>
<h2>Forms</h2>
<h2>Navigation</h2>

Skipping heading levels is not always an automatic failure, but it often signals a confused structure. Screen reader users may wonder whether a section is missing.

Problem 4: Multiple unrelated H1 elements

Some pages use multiple h1 elements because each component renders its own title.

<h1>ADA CodeFix</h1>
<h1>Pricing</h1>
<h1>Frequently Asked Questions</h1>

Better:

<h1>ADA CodeFix Pricing</h1>
<h2>Plans</h2>
<h2>Frequently Asked Questions</h2>

For most marketing pages and articles, one clear h1 is simplest and most predictable.

Problem 5: Empty or vague headings

Empty headings can appear when content is conditionally rendered.

<h2></h2>

Vague headings also create a poor outline:

<h2>Overview</h2>
<h2>More</h2>
<h2>Details</h2>

Better:

<h2>How the accessibility scanner works</h2>
<h2>Common issues ADA CodeFix detects</h2>
<h2>What to review before applying AI-generated fixes</h2>

A good heading should help the user decide whether to read the section.

How to fix heading structure step by step

Step 1: Identify the page purpose

Every indexable page should have a clear main topic. The h1 should usually describe that topic.

Good:

<h1>How to Fix Missing Form Labels for WCAG and ADA Accessibility</h1>

Weak:

<h1>Guide</h1>

A strong h1 helps users and search engines understand the page.

Step 2: Build the outline before styling

Write the outline as text before implementing the page:

H1: How to Fix Keyboard Navigation Issues
  H2: What keyboard navigation means
  H2: WCAG criteria related to keyboard navigation
    H3: WCAG 2.1.1 Keyboard
    H3: WCAG 2.1.2 No Keyboard Trap
  H2: Common keyboard navigation failures
    H3: Clickable divs
    H3: Hover-only menus

Then implement that outline in HTML.

Step 3: Replace fake headings

Search for styled title classes:

<div class="heading">
<span class="title">
<p class="section-title">

If the text introduces a section, replace it with a real heading.

Before:

<div class="card-title">Common violations</div>

After:

<h3 class="card-title">Common violations</h3>

Step 4: Separate visual style from heading level

Do not choose h4 because the text should look small. Choose the correct structural heading, then style it.

<h2 class="eyebrow-heading">Security and data handling</h2>

.eyebrow-heading {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

This keeps the semantic structure intact.

Step 5: Fix component heading levels

Reusable components can create heading problems. A card component might always render h3, but sometimes it appears under an h2 and sometimes under an h3.

A flexible React component can accept a heading level:

function GuideCard({ title, href, headingLevel = "h3" }) {
  const Heading = headingLevel;

  return (
    <article className="guide-card">
      <Heading>
        <a href={href}>{title}</a>
      </Heading>
    </article>
  );
}

Component defaults are useful, but page-level structure should win.

Step 6: Review the heading list

Use a browser extension, accessibility testing tool, or screen reader heading list to review the page outline.

Ask:

• Is there one clear main heading?
• Are major sections marked as h2?
• Are subsections nested logically?
• Are any headings empty?
• Are headings descriptive?
• Does the outline make sense without the body text?

If the heading list reads like a useful table of contents, you are probably close.

Headings and SEO

Headings should not be stuffed with keywords. A page full of repetitive keyword headings can look spammy and read poorly.

Bad:

<h2>ADA Compliance Form Labels</h2>
<h2>ADA Compliance Form Label Fixes</h2>
<h2>ADA Form Label Compliance Guide</h2>

Better:

<h2>Why missing form labels matter</h2>
<h2>WCAG criteria related to form labels</h2>
<h2>How to fix placeholder-only labels</h2>

Use headings to organize the article naturally. Include relevant phrases where they fit, but do not force repetition.

How ADA CodeFix detects heading issues

ADA CodeFix can flag common heading problems such as:

• Missing h1
• Multiple or confusing h1 elements
• Empty headings
• Skipped heading levels
• Text that appears visually styled as a heading but is not marked up semantically
• Repeated vague headings
• Heading levels used inconsistently across templates
• Component patterns that create poor heading hierarchy

Automated tools can identify structural patterns, but they cannot always judge whether a heading is helpful or whether a section title is descriptive enough. Human review is still important.

Manual heading checklist

Use this checklist after making changes.

1. Does the page have one clear main topic?
2. Is the main topic represented by a clear h1?
3. Do major sections use h2?
4. Do subsections use h3 or lower levels logically?
5. Are heading levels chosen for structure, not visual size?
6. Are fake headings replaced with real headings?
7. Are empty headings removed?
8. Are headings descriptive enough to scan?
9. Does the heading list read like a useful outline?
10. Do reusable components support appropriate heading levels?
11. Are card headings linked when they represent navigation?
12. Are headings not stuffed with repetitive keywords?

Platform-specific notes

WordPress

Many themes let editors choose heading blocks visually. Review pages for skipped levels, especially when blocks are copied from templates. Page builders sometimes use headings inside cards or widgets incorrectly.

Shopify

Check product pages, collection pages, FAQ sections, cart drawers, and theme sections. Product titles should usually be the main heading on product pages. Collection cards should fit the surrounding structure.

Webflow

Webflow allows selecting heading levels and styling independently. Make sure designers are not choosing a heading level just because it looks right.

React and Next.js

Build components that allow heading level control. Avoid hardcoding h2 or h3 in components used across many page contexts.

Final takeaway

Heading structure is one of the simplest ways to make a page easier to scan, navigate, and understand. Good headings create a useful outline for screen reader users, improve readability for everyone, and support clearer SEO.

The fix is not complicated: use one clear h1, organize major sections with h2, nest subsections logically, replace fake headings with real headings, and use CSS for visual styling. ADA CodeFix can help flag structural heading issues, but a human should review whether the final outline actually makes sense.

Sources

• W3C WCAG Understanding 1.3.1 Info and Relationships (opens in new tab)
• W3C WCAG Understanding 2.4.6 Headings and Labels (opens in new tab)
• W3C WCAG Understanding 2.4.10 Section Headings (opens in new tab)
• W3C WAI Tutorial: Headings (opens in new tab)
• W3C Web Accessibility Initiative (WAI) (opens in new tab)
• MDN Heading elements (opens in new tab)