How headings structure a page
Headings from h1 to h6 form the table of contents of a page. Screen reader users jump through them from section to section instead of listening to everything.
How it works
HTML has six levels of headings, h1 to h6. Together they form an outline like a book's: the h1 is the title of the page, h2s are the chapters, h3s the sections within them.
Sighted readers skim a page and recognise headings by their size and type. Screen reader users get that overview from the markup: one key jumps to the next heading, another to the next h2, or they bring up a list of all headings. Without an outline, all that is left is to listen to the page from top to bottom.
WCAG 2.2 requires that structure you can see is also in the code (success criterion 1.3.1), and that headings describe what follows (2.4.6).
What matters
- Headings at all. A page without a single heading cannot be scanned. Bold text in a
divlooks like a heading but isn't one. - One h1 that says what the page is about. Usually that is the visible title of the content, not the logo.
- No skipped levels. An
h2is followed by anh3, not straight by anh4. Otherwise people navigating by heading suspect a missing section. Jumping back up is fine: after anh4the nexth2may follow. - No empty headings. A heading without text, such as one holding only an icon, is announced as an empty heading.
- Level by meaning, not by size. If an
h3should look bigger, that's a job for CSS. Equally, not every sentence set in large type is a heading.
How to set it up
In your CMS editor you choose the level in the paragraph format or the heading block, not by font size and bold. The fixed headings of the page, in the header, sidebar or footer, come from the theme. That is often where the trouble lies: widget titles as h2 or h4 out of context, or the logo as h1 on every page. Whoever maintains the theme changes that, usually your agency. The report shows the outline of the page; read it like a table of contents.