Navigating by Headings — Using Heading Structure for Screen Reader Navigation
In this tutorial, you will learn about Navigating by Headings. We cover key concepts, practical examples, and best practices to help you master this topic.
Screen reader users navigate by headings using H key or heading lists, making proper heading hierarchy essential for efficient content navigation and understanding page structure.
In this tutorial, you'll learn how Screen Readers navigate by headings.
What You'll Learn
By the end of this lesson, you'll understand heading hierarchy best practices, how screen readers expose headings, and how to test heading navigation.
Why It Matters
Headings are the primary navigation method for screen reader users. A broken heading structure makes content inaccessible regardless of ARIA usage.
Real-World Use
DodaTech's content guidelines require proper heading hierarchy because screen reader users are the primary consumers of documentation.
Heading Navigation
flowchart TD
A[Screen reader user opens page] --> B[User presses H to find first heading]
B --> C[User reads heading structure]
C --> D[User presses 2-6 for heading levels]
D --> E[User opens heading list]
E --> F[User selects heading to jump to]
F --> G[User reads content under heading]
G --> H{More sections?}
H -->|Yes| C
H -->|No| I[End of page]
Proper Heading Hierarchy
<!-- Proper heading hierarchy -->
<h1>Page Title</h1>
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
<h3>Subsection 1.2</h3>
<h2>Section 2</h2>
<h3>Subsection 2.1</h3>
<!-- Bad heading hierarchy (skipping levels) -->
<h1>Title</h1>
<h3>Section</h3> <!-- Skipped h2 -->
<h4>Subsection</h4> <!-- Skipped h3 -->
Screen reader users navigate headings with the H key (next) and Shift+H (previous). They can also open a heading list with NVDA+F6, Insert+F6 (JAWS), or VO+U and select headings in the Rotor.
Heading Quick Navigation
<!-- Users can navigate to specific heading levels -->
<!-- Press 1 to jump to h1, 2 to jump to h2, etc. -->
<h1>Page Title</h1> <!-- Press 1 -->
<h2>Getting Started</h2> <!-- Press 2 -->
<h2>Configuration</h2> <!-- Press 2 again -->
<h3>Network</h3> <!-- Press 3 -->
<h3>Security</h3> <!-- Press 3 again -->
<h2>Troubleshooting</h2> <!-- Press 2 again -->
Testing Heading Navigation
// Automated heading check
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6, [role="heading"]');
let previousLevel = 0;
headings.forEach(h => {
const level = parseInt(h.tagName?.[1]) || parseInt(h.getAttribute('aria-level'));
if (level - previousLevel > 1 && previousLevel > 0) {
console.warn('Skipped heading level:', h.textContent);
}
previousLevel = level;
});
Common Mistakes
- Skipping heading levels: Going from h1 to h3 breaks the hierarchy.
- Using headings for visual styling only: Headings must reflect document structure.
- Missing page title (h1): Every page needs exactly one h1.
- Multiple h1 elements: A page should have one main h1.
- Empty headings: Headings with no content confuse screen reader users.
Practice and Challenge
1. What key navigates to the next heading? H.
2. How do you navigate to a specific heading level? Press the level number (1 for h1, 2 for h2, etc.).
3. How do you open the NVDA heading list? NVDA+F6.
4. How many h1 elements should a page have? One.
5. Challenge: Run a heading hierarchy check on your website. Fix any skipped levels or missing headings.