Definition: A heading structure is a page's outline, built with the HTML elements <h1> to <h6>. It shows which section covers which topic and how the sections relate to each other. For many screen reader users it is the main way to skim a page [1][3].
German: Überschriftenstruktur · Also: heading hierarchy · Last reviewed: 27 September 2026
Why it matters so much
Sighted people skim a page by the size and weight of its headings. Screen reader users do the same with the keyboard: in NVDA, H jumps to the next heading and the digits 1 to 6 jump to the next heading of that level. Many start by calling up a list of all headings.
In WebAIM's survey of screen reader users (2023/24), 71.6% said that on a long page they look for information by navigating its headings first, and 88.8% found heading levels very or somewhat useful [3].
Two WCAG criteria apply. 1.3.1 Info and Relationships requires visible headings to be headings in the code as well [2]. 2.4.6 Headings and Labels requires them to describe their topic [4].
What a good structure looks like
<h1>Winter jackets</h1>
<h2>Filters</h2>
<h2>Products</h2>
<h3>Nord down jacket</h3>
<h3>Süd parka</h3>
<h2>Delivery and returns</h2>The indentation is only there to show the outline. Three rules of thumb [1]:
- One
<h1>that says what the page is about. That is common practice; WCAG does not prescribe a number. - Don't skip levels on the way down. An
<h2>is followed by an<h3>, not straight by an<h4>. On the way back up, jumping is fine. - The level follows the outline, not the font size. How big a heading looks is a job for CSS.
In code
<!-- Looks like headings, is plain text -->
<p class="big bold">Delivery</p>
<!-- Level chosen by font size -->
<h4>Returns</h4><!-- Level by outline, size by CSS -->
<h2 class="small">Delivery</h2>
<h2 class="small">Returns</h2>Common mistakes
- Bold text instead of a heading. Visually a heading; to a screen reader, a paragraph.
- Headings used for styling. A teaser or a price is not a heading just because it should look big.
- Empty headings, such as an
<h2>holding nothing but an icon. - Skipped levels, often because a CMS component comes with a fixed level. Components that let editors choose the level to fit the page avoid this.
- Meaningless text such as "More" or "Info". The list of headings then reads like a table of contents with nothing in it.
How Reviseberg handles it
Reviseberg checks every page with axe-core. The rules heading-order (a skipped level), page-has-heading-one (no <h1>) and empty-heading (an empty heading) find the structural errors. axe-core files the first two as best practice, so Reviseberg shows them as "best practice, no WCAG criterion", gives them a low weight in the score and never fails a criterion on them. What no rule can decide is whether bold text should really be a heading, and whether a heading describes its section. WCAG 2.4.6 therefore stays "untested" until a person records a result.
Related terms
Semantic HTML · Landmark · Screen reader · Skip link · Accessibility tree