Heading Hierarchy for Screen Readers
Structure headings so screen reader users can navigate effectively.
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 -->All lessons in this course
- Why Accessibility Matters WCAG Levels
- Heading Hierarchy for Screen Readers
- Image Alt Text When and How
- Keyboard Navigation and Focus Order