Heading Levels: The Map Screen Reader Users Actually Navigate By

A sighted user scans a page. A screen reader user navigates it by headings, jumping from one to the next with a single keypress, building a map of the page in their head. When the heading levels lie, the map lies, and the page becomes a maze with no exits marked.

How heading navigation actually works

In NVDA, the H key moves to the next heading and Shift plus H moves back. The rotor on VoiceOver lists every heading on the page, and the user picks one to jump to. JAWS has a headings list dialog. In all three, the heading level is the structure: an H1 is the page, H2s are its sections, H3s are subsections. A screen reader user who hears H1, then H2, then H4 has just been told there is a section missing, and they cannot tell whether the missing section exists somewhere they cannot reach or never existed at all.

That is what Success Criterion 1.3.1, Info and Relationships, requires: information, structure, and relationships conveyed through presentation must be programmatically determinable. A heading that looks like a heading because it is large and bold, but is marked up as a paragraph, fails it. A heading level chosen for its font size rather than its place in the outline fails it. And Success Criterion 2.4.6, Headings and Labels, adds that headings must describe the topic or purpose, so a heading that says Click here or More fails on description as well.

The test that finds the problem takes two minutes. Open the page in a browser, run the WAVE extension or the headingsMap tool, and read the outline. It should read like a table of contents: one H1, H2s for the sections, H3s nested under the H2 they belong to. If the outline jumps from H1 to H4, or lists five H1s, or shows a heading that says nothing, the page has a navigation defect, not a styling preference.

The failures that keep shipping

Skipped levels are the most common. A template that styles section titles as H2 and subsection titles as H4, because the designer liked the H4 size, produces an outline with a hole in it. The fix is to use the level the structure needs and style it with CSS. Heading levels are structure, not font sizes, and CSS exists precisely so the two can be chosen independently. Related reading: Focus Not Obscured: When a Sticky Header Hides the Keyboard.

Multiple H1s are the second. The old rule, one H1 per page, is still the right practice even though HTML5 technically allows more, because screen readers and search engines both treat the H1 as the page title. A product page with an H1 on the product name and another on the reviews section tells the navigation tools there are two pages here. Pick one, and make the others H2s.

Decorative headings are the third. A large bold line used as a visual break, marked up as an H2, appears in the headings list as a section that contains nothing. A sighted user reads past it. A screen reader user navigates to it, finds no content, and navigates back. If a line is decoration, mark it as a paragraph or a div. If it is a section, give it content that belongs under it. More on this: Keyboard Navigation for Product Image Galleries.

How to audit a whole site

Do not audit headings page by page. Audit the templates, because a heading defect in a template is a defect on every page that uses it. Run the outline tool on the homepage, a product page, a collection page, the cart, and the checkout, and fix the template where the outline breaks. Then check the content authors, because a CMS that lets an author pick any heading level for any line will produce skipped levels within a week of the template fix.

And write the headings for the map, not for the keyword. A heading that says what the section does, in the words a customer would use to find it, serves navigation and search at the same time. A heading stuffed with keywords serves neither, because the screen reader user hears it as a section title and the search engine reads it as a heading, and both judge it by whether it describes what follows.

Frequently asked questions

How many H1s should a page have?

One. Screen readers and search engines both treat the H1 as the page title, and multiple H1s tell the navigation tools there are two pages here.

Is skipping from H2 to H4 a real failure?

Yes, under Success Criterion 1.3.1. The heading outline is the page structure, and a skipped level tells assistive technology a section is missing.

Can I style an H2 to look like an H4?

Yes. Heading levels are structure, not font sizes. Use the level the outline needs and set the appearance with CSS.

How do I test heading structure?

Use the WAVE extension or headingsMap and read the outline. It should read like a table of contents, one H1, H2s for sections, H3s nested under them.