Heading order must be hierarchical

Heading order must not skip levels and requires a hierarchical sequence

Headings must follow a logical H1–H6 order without jumping levels. This applies to page titles, section headings, and component headings across templates and CMS content. Disordered headings hinder screen reader navigation and make pages harder to scan.

Why It Matters

Screen reader users rely on heading lists and by-level navigation to understand structure and jump to sections. Skipped or mislabeled levels create false hierarchies and confusion.

People with cognitive or learning disabilities benefit from predictable structure and clear chunking of content.

Sighted users scan headings to find information quickly; inconsistent levels reduce scannability.

Common Causes

• Using heading elements (H1–H6) for visual styling instead of structure.
• Jumping from H1 to H3 (or H2 to H4) to “match” a design.
• Inconsistent use of multiple H1s across sections in a single page.
• CMS or component libraries that output fixed heading levels regardless of context.
• Hiding headings visually with CSS while leaving stray levels in the DOM.
• Using role="heading" without a correct aria-level value.

How to Fix

• Outline the content first. Identify the page/topic title and major sections.
• Use one clear page title. Recommendation: one H1 per page for clarity (WCAG does not require only one, but it improves predictability).
• Use H2 for top-level sections under the H1. Use H3 for subsections under an H2, H4 under an H3, and so on.
• Do not skip levels. Increase the level by one within a section, and decrease as you exit that subsection.
• Do not use heading tags just to change font size or weight. Style with CSS classes.
• Ensure components (cards, widgets, modals) receive the correct level based on where they are used. If a component cannot change its tag, use role="heading" with aria-level to set the correct level.
• Keep headings concise, unique, and descriptive of the section that follows.
• Avoid empty headings and avoid visually removing headings that communicate structure.

How to Test

• Keyboard check:
• With a screen reader, use heading navigation keys (e.g., NVDA: H, Shift+H, and 1–6; JAWS: H and 1–6) to move through headings in order.
• Confirm that levels increase and decrease logically without skips.
• Screen reader check:
• Open the heading list (NVDA: Insert+F7, Headings; JAWS: Insert+F6; VoiceOver: rotor > Headings) and review levels and sequence.
• Ensure each heading accurately describes the following content.
• Mobile/touch check:
• iOS VoiceOver: use the rotor set to Headings and swipe to navigate. Levels should be logical.
• Android TalkBack: use the local context menu to navigate by headings.
• Visual/DOM check:
• Use a heading outline tool (e.g., browser devtools Accessibility panel or an outline extension) to review the tree.
• Inspect components that use role="heading" and verify correct aria-level values.

Good Example

<h1>Guide to Home Coffee Brewing</h1>
<p>Intro text...</p>
<h2>Choose Your Beans</h2>
<p>Content...</p>
<h3>Roast Levels</h3>
<p>Content...</p>
<h3>Grinding Basics</h3>
<p>Content...</p>
<h2>Brewing Methods</h2>
<p>Content...</p>
<section aria-labelledby="pour-over">
  <h3 id="pour-over">Pour-Over</h3>
  <div role="heading" aria-level="4">Water Temperature</div>
  <p>Content...</p>
</section>

Bad Example

<h1>Cycling Nutrition</h1>
<p>Intro...</p>
<h3>Carbs</h3> <!-- Skips H2 -->
<h4 class="big">Hydration</h4> <!-- Used H4 only for size -->
<div role="heading">Race Day Meals</div> <!-- Missing aria-level -->
<b>Recovery</b> <!-- Bold text pretending to be a heading -->

Quick Checklist

• One clear page title; recommendation: a single H1 per page.
• Use H2 for main sections, H3+ for nested subsections.
• Do not skip heading levels within a section.
• Do not use headings purely for visual styling.
• Components use correct level or role="heading" with aria-level.
• Headings are concise, unique, and describe following content.
• No empty or hidden headings that break the outline.
• Verify order with a heading list in a screen reader and an outline tool.