Heading Structure
Logical hierarchy for screen reader navigation
What to avoid
<h1>Welcome to Our Site</h1>
<h4>Our Services</h4>
<h2>Contact Us</h2>Jumping from h1 to h4 skips two levels - implying missing subsections that do not exist. Screen reader users navigating by heading will be confused by the gaps. The heading order is not predictable or consistent.
Best practice
<h1>Welcome to Our Site</h1>
<h2>Our Services</h2>
<h3>Web Design</h3>
<h3>Accessibility Consulting</h3>
<h2>Contact Us</h2>Heading levels follow a logical nested structure. No levels are skipped. Screen reader users can jump to any section efficiently.
Key rules
- One
h1per page - it should describe the page's main topic - Never skip levels going down -
h2should not be followed directly byh4 - You can skip levels going back up - after
h4, returning toh2for a new section is correct - Use headings for structure, not style - use CSS to control visual appearance
- If you want a visual heading style without the semantic meaning, use a class on a
pordivinstead
Why it matters
Screen reader users navigate pages by heading the way sighted users scan visually. Most screen readers let users pull up a list of all headings and jump directly to any section - the equivalent of a table of contents. A broken hierarchy means that navigation falls apart. For all users, clear headings reduce time-to-content and improve comprehension.
Quick check
In Chrome DevTools, open the Accessibility panel and inspect the heading outline. Or use Vesper Inspect - hover any heading to see its level and position in the document structure.