HTML Academy · Lesson

Heading Hierarchy for Screen Readers

Structure headings so screen reader users can navigate effectively.

Heading Hierarchy for Screen Readers is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

How Screen Readers Navigate Headings

Screen reader users navigate pages primarily by headings:

They press H to jump to the next heading
They press 1-6 to jump to specific heading levels
They open a list of all headings (like a table of contents)
Correct heading hierarchy is essential for this navigation to work

Screen Reader Heading List

NVDA and JAWS can list all headings on a page:

<!-- A well-structured page with this heading order: -->
<h1>HTML5 Complete Guide</h1>
  <h2>Document Structure</h2>
    <h3>The DOCTYPE</h3>
    <h3>The html head body</h3>
  <h2>Semantic Elements</h2>
    <h3>Article</h3>
    <h3>Section</h3>

<!-- Becomes a navigable list for screen reader users -->
<!-- Similar to a table of contents in a book -->

Wrong Heading Hierarchy

Common heading hierarchy mistakes:

<!-- BAD: skipping h2, going straight from h1 to h3 -->
<h1>My Article</h1>
<h3>Introduction</h3>    <!-- Skips h2! -->
<h4>Background</h4>

<!-- BAD: using headings for visual size -->
<h4 class="huge-title">This looks big</h4>  <!-- h4 in logical order? -->

<!-- BAD: using bold text instead of headings for sections -->
<p><strong>Introduction</strong></p>  <!-- Not a heading at all -->

Correct Hierarchy in Practice

A correct heading structure for a documentation page:

<h1>HTML Forms Documentation</h1>
<h2>Overview</h2>
<h2>Form Elements</h2>
  <h3>input</h3>
    <h4>text type</h4>
    <h4>email type</h4>
  <h3>select</h3>
  <h3>textarea</h3>
<h2>Validation</h2>
  <h3>Built-in Validation</h3>
  <h3>Custom Validation</h3>

One h1 Per Page

Best practice: exactly one <h1> per page:

<h1>JavaScript Array Methods</h1>
<!-- This is the page's main topic -->
<!-- Should match or closely relate to the <title> element -->
<!-- Appears as the main heading users see first -->
<!-- Search engines give it the highest SEO weight -->

Heading Levels Reflect Content Hierarchy

Heading levels express the logical structure of content:

Use <h2> for major page sections
Use <h3> for subsections within h2 sections
Use <h4> for sub-subsections
Rarely need more than h4 in practice

No Headings for Visual Style

Never choose a heading level for its default visual size:

/* BAD approach: h4 because it looks right: */
<h4 style="font-size: 2rem;">Section Title</h4>

/* CORRECT approach: right level, resized with CSS: */
<h2>Section Title</h2>
/* Then: h2 { font-size: 2rem; } */

/* Or: aria-label on section if heading would disrupt structure:
   — rare, usually better to fix the heading level */

WCAG 2.4.6 Headings and Labels

WCAG 2.4.6 (Level AA) requires:

Headings and labels describe topic or purpose.

Headings should accurately describe the section's content
Generic headings like 'Section' or 'Details' fail this criterion
Labels on form fields must describe the field's purpose

Using Headings in Components

When building reusable components, heading levels must be flexible:

<!-- BAD: hardcoded heading level in a card component -->
<div class="card">
  <h3>Card Title</h3>  <!-- What if card appears in h2 or h4 context? -->
</div>

<!-- GOOD: document context determines level -->
<!-- Component receives level as a parameter in JS frameworks -->
<!-- Or use aria-level on a generic element -->
<div role="heading" aria-level="3">Dynamic Level Heading</div>

The document Outline

View the page heading outline in browser DevTools or tools:

Chrome → Accessibility panel → Name/role view
Firefox → Accessibility tab
HeadingsMap Chrome extension — shows visual outline
WAVE accessibility tool — headings section

Headings and SEO Alignment

Heading hierarchy aligns with SEO best practices:

Search engines parse heading hierarchy to understand content structure
H1 = main topic (matches title); H2 = major subtopics; H3 = details
Keywords naturally in headings improve page relevance signals
Correct heading structure = better accessibility + better SEO simultaneously

Skip Navigation and Headings

Combine skip links with heading navigation:

<!-- Skip link bypasses nav to main content: -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Main content heading enables heading navigation: -->
<main id="main-content">
  <h1>Page Title</h1>
</main>
<!-- Screen reader users: skip link for fast access;
     heading navigation for page exploration -->

Quick Check

How do screen reader users typically navigate between headings?

Recap: Heading Hierarchy

Heading accessibility essentials:

One <h1> per page — the main topic
Use heading levels in order — never skip
Headings describe content, not visual size
Screen reader users navigate via H key and heading list
Check outline with HeadingsMap or WAVE

Frequently asked questions

Is the “Heading Hierarchy for Screen Readers” lesson free?

Yes — the full text of “Heading Hierarchy for Screen Readers” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Heading Hierarchy for Screen Readers”?

Structure headings so screen reader users can navigate effectively. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Heading Hierarchy for Screen Readers” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy