Document structure
Document structure is the logical organization of a web page through hierarchical headings (h1 to h6) and semantic HTML5 tags. Screen readers use them to build a navigable table of contents and allow their users to jump directly to the desired section.
71.6% of screen reader users navigate a page through its headings, according to the tenth WebAIM survey. Without a heading hierarchy, these users receive a continuous stream of text. No landmarks, no shortcuts.
#Headings: the backbone of the page
The <h1> to <h6> tags divide content into nested sections. An <h1> tops the page, <h2>s identify major sections, <h3>s identify subsections. NVDA, JAWS and VoiceOver build a table of contents from this hierarchy: the user jumps from one heading to another with a single keystroke.
The W3C H42 technique states the principle: headings must reflect the structure of the content, not its visual appearance.
<!-- Logical hierarchy -->
<h1>Italian recipes</h1>
<h2>Appetizers</h2>
<h3>Bruschetta</h3>
<h3>Carpaccio</h3>
<h2>Main courses</h2>
<h3>Risotto</h3>#The mistake almost everyone makes
Skipping levels. An <h1> followed directly by an <h4>. Visually, no one notices the difference. CSS masks the problem. The screen reader announces a gap in the hierarchy. The user wonders if they missed three entire sections.
The WAI tutorial on headings is clear: levels must follow one another without gaps. An <h2> after an <h1>, an <h3> after an <h2>.
Another classic pitfall: choosing an <h3> because its default size fits the design. Headings structure the content. CSS manages the appearance. Mixing the two breaks accessibility.
#Beyond headings: semantic tags
Headings divide the content. Semantic HTML5 tags divide the page itself:
<body>
<header><!-- site header --></header>
<nav aria-label="Main menu"><!-- navigation --></nav>
<main><!-- main content --></main>
<footer><!-- footer --></footer>
</body>Each tag creates a landmark that assistive technologies exploit for region-based navigation. RGAA criterion 9.2 requires this structure.
Code must convey the structure that the eye perceives visually. This is the principle of WCAG criterion 1.3.1.
#In summary
Structure your headings from <h1> to <h6> without skipping levels. Use <header>, <nav>, <main> and <footer> to mark major areas. Test with a screen reader: display the list of headings and verify that the hierarchy reflects the actual content of the page.