How to Fix Heading Hierarchy

Heading hierarchy is how screen-reader users navigate a page — they press H to jump between H2s, scanning sections like sighted users skim subheadings. Broken hierarchy (multiple H1s, skipped levels, headings used for visual size only) confuses this navigation and weakens SEO topic understanding. The fix is rarely per-page — it's templates and content editor training. For related fixes, see the Accessibility Fixes index.

1. Run the audit

2. Fix the H1

Exactly one H1 per page. The H1 should describe the page's main topic.

<!-- Wrong: site name as H1 on every page -->
<h1>
  <a href="/">Acme Co</a>
</h1>

<!-- Right: logo is just an image link, H1 is the page topic -->
<a href="/" aria-label="Acme Co home">
  <img src="/logo.svg" alt="">
</a>
<!-- ...later, in <main> -->
<h1>Industrial valves for water treatment</h1>

Per page type, the H1 typically maps to:

• Homepage: value proposition or site purpose
• Article page: article title
• Product page: product name
• Category page: category name
• Search results: "Results for [query]"

3. Fix skipped levels

<!-- Wrong -->
<h1>Article title</h1>
<h4>Subsection</h4>  <!-- skipped H2 and H3 -->

<!-- Right -->
<h1>Article title</h1>
<h2>Subsection</h2>

If the subsection visually wanted to be smaller, that's a CSS choice. Keep the semantic level correct:

h2 { font-size: 1.5rem; }  /* normal */
h2.smaller { font-size: 1.2rem; }  /* style a subset, don't downlevel the tag */

4. Common template issues

Sidebar widgets using H3

Many themes hardcode H3 for sidebar widget titles. If main content uses H1-H2, this creates a skip. Either restructure to use H2 in sidebars, or accept H2 + sidebar H3 as a valid structure (sidebar visually parallel to main, semantically can be too).

Footer headings

"Quick Links", "Contact Us", "Follow Us" — common footer column titles often coded as H2. If main content uses H1, then footer H2s are at the same level as main subsections, suggesting they're peer content. Fix: either step footer headings down (H3 if main has H2), or remove headings entirely and use styled strong instead.

Card components

Product cards on a category page often have product names as H3 or H4. If the page has H1 (category) → H2 (filters/section) → H3 (per product), the structure works. But if cards jump straight to H4 because designers wanted smaller text, that's a skip.

5. Fix content-editor mistakes

Content editors often pick headings for visual size, not semantic structure:

Editor training

• Heading levels are semantic, not stylistic
• Pages have one H1 already (the page title) — content body should use H2 and below
• Never skip levels for visual reasons — use CSS classes for size variation
• Treat headings as a table of contents — does the outline make sense without the visual layout?

CMS configuration

Some CMS rich-text editors expose H1 in the dropdown when the page template already has an H1. Remove H1 from the editor's allowed heading options:

// TinyMCE config
block_formats: 'Paragraph=p; Heading 2=h2; Heading 3=h3; Heading 4=h4'

6. Tools to verify

Browser extensions

• headingsMap (Chrome/Firefox) — shows page outline, highlights skips
• WAVE — flags heading errors in-page
• axe DevTools — includes heading-order rule

Screen reader heading navigation

With a screen reader on, press H to jump between H1s and adjacent levels. The flow should match the visible content order. If it's confusing or skips around, the hierarchy is broken.

7. Re-run the audit

After fixes, re-run the Accessibility audit. Heading findings should drop to zero. Spot-check a few pages with a screen reader to confirm the heading navigation works.