Heading structure (H1, H2, H3) can seem like a purely visual concern, a matter of font size, weight and spacing on the screen.
For users who rely on screen readers, headings are navigation landmarks. They're the main way to explore and understand a page without sight.
How screen readers use headings
According to the W3C WAI Headings tutorial, headings communicate the organization of content on the page, and browsers, plugins, and assistive technologies use them to provide in-page navigation.
Screen readers like NVDA, JAWS and VoiceOver have keyboard shortcuts for jumping between headings. H moves to the next heading, and 1 through 6 jump to headings of a specific level. That makes headings work like a table of contents: the user can scan the structure of a page and go straight to the section they need without reading every element in between.
When a user presses H, the screen reader announces the heading text and its level: "Heading level 2: What is WCAG". The level tells the user where they are in the document hierarchy, whether they're in a main section or a subsection, and how sections relate to each other.
The image shows the same content structured two ways. On the left is a broken hierarchy with three separate failures: three H1 elements, a jump from H1 straight to H3, and an H2 after H3s. On the right is the correct hierarchy: a single H1, then H2s for main sections and H3s for subsections, in a logical, predictable order.
What a broken hierarchy looks like in practice
The broken structure on the left shows three of the most common heading errors.
Multiple H1 elements
A page should have a single H1 that describes its main topic. With several H1s, a screen reader user navigating by heading level 1 finds what looks like several unrelated pages, or can't tell what the page is about at all.
Skipped heading levels
Jumping from H1 straight to H3 breaks the logical nesting of content. A user navigating by H2 to find the main sections skips over anything marked as H3, because their shortcut doesn't surface it at that level.
Out-of-order headings
An H2 after H3 elements makes the document outline unpredictable, and the user can no longer reliably infer how sections relate.
Visual styling and semantic structure are separate concerns
This distinction affects how both designers and developers choose heading levels.
If a design needs a section title to look smaller or lighter than the surrounding content, use CSS and keep the heading level. A title that looks like body text but is semantically an H2 is perfectly valid. A title that looks like an H2 but is marked as H3 for a visual effect is a structural failure.
The heading level communicates meaning and hierarchy to assistive technologies, search engines and the document outline. The visual style controls appearance. Keep the two independent.
The WCAG criteria
Two WCAG criteria apply here.
WCAG 1.3.1 Info and Relationships (Level A) requires that information, structure, and relationships conveyed through visual presentation can also be programmatically determined. A heading that looks prominent but isn't marked as a heading in the HTML fails this criterion. A heading marked at the wrong level misrepresents the structure of the content.
WCAG 2.4.6 Headings and Labels (Level AA) requires that headings and labels describe the topic or purpose of the content they introduce, so it covers meaning as well as structure. A heading at the correct level with a vague or generic label still doesn't give assistive technology users what they need to navigate efficiently.
Both criteria rest on the same principle: the markup must communicate structure and meaning, not only the visual presentation.
Sighted users never notice this failure. For anyone navigating with a screen reader, a broken heading hierarchy means reading the page line by line from top to bottom, which takes away the main advantage assistive technology gives them.
References: