# The Heading Structure of a Product Page: H1 to H3 in the Order a Screen Reader Meets Them

Source: https://adareadyhq.com/blog/2026-11-15-heading-structure-product-page-screen-reader.html

November 15, 2026

*A screen reader user opens a product page and pulls up the headings list to find the reviews. The list shows three H1s, no H2s, and a jump from H1 to H4. The reviews are there, somewhere, but the table of contents that would find them does not exist.*

## The heading outline is the navigation

Headings are the table of contents for a screen reader user. A person using a screen reader navigates by headings the way a sighted person navigates by scanning, and the outline has to read like the page. WCAG 1.3.1, Info and Relationships, at Level A, requires that information and relationships conveyed through presentation can be programmatically determined. WCAG 2.4.6, Headings and Labels, at Level AA, requires headings to describe their topic. A heading structure that skips levels, duplicates the H1, or buries the content under the wrong level fails both, even when the visual design looks clean.

The product page has a natural outline, and it is the same on almost every store. H1: the product name. H2: the sections the shopper meets in order, description, specifications, reviews, related products. H3: the subsections inside each, the size guide inside specifications, the individual review inside reviews. The order is the order the shopper meets the content, top to bottom, and the levels nest: an H3 belongs under the H2 that introduces it, not under the H1 three sections up.

The common failure is the template. A theme that renders the product name as an H1, the section titles as H2s, and the related product names as H3s is fine. A theme that renders every product card title as an H2, every price as an H3, and the reviews section as an H4 is not, because the outline reads like a list of products, not a page about one product. The [DOM order post](2026-11-13-dom-order-vs-visual-order.md) is the same lesson about a different structure: the order the screen reader meets the content is the order that matters, and the visual layout is not the structure.

## The four breaks, and where they hide

First, the duplicate H1. A theme that puts the product name in an H1, the logo in an H1, and the page title in an H1 gives the page three top-level headings, and the screen reader user who jumps to the H1 lands on the logo, not the product. One H1 per page, and it is the product name. The logo is not a heading. The page title is not a heading. The H1 is the product.

Second, the skipped level. A section that goes from H1 to H3, or from H2 to H4, breaks the outline, because the screen reader reports the gap and the user cannot tell whether content is missing. The visual size is not the level: a heading that looks like an H2 but is coded as an H4 is a broken outline, and a heading that looks small but is coded as an H2 is fine. Code the level for the structure, style it for the design.

Third, the heading that is not a heading. A section title styled bold and large but coded as a div or a span is invisible to the headings list, and the section it introduces is unreachable by heading navigation. If it looks like a heading and acts like a heading, code it as a heading. Fourth, the heading that is a heading but says nothing. A section titled Details, or More, or Info, tells the screen reader user nothing about what follows. Headings have to describe their topic, and a vague heading is a heading that fails 2.4.6 while passing every automated check.

The test is the headings list. Open the page in NVDA and press Insert F6, or in VoiceOver and open the rotor, and read the outline. If it reads like a table of contents, the structure works. If it reads like a random list, it does not, and the fix is a template change, not a content change, because the outline is built by the theme, not by the copy.

## The fix is in the template

Fix the theme, not the page. The heading outline is generated by the template, and a content editor cannot fix a structure the theme builds wrong on every product. Change the logo from an H1 to a div. Change the section titles to H2s in the order the shopper meets them. Change the related product names to H3s under the related products H2. Then re-check the outline on three product pages, because the template is shared and the fix is shared too.

The [alt text post](2026-11-14-alt-text-writing-for-the-image.md) is the companion check: the text that describes the image has to match the image, and the heading that introduces the section has to match the section. Both are cases where the code has to say what the design already says, and the screen reader user is the one who finds out when it does not. The outline is the cheapest navigation on the page to fix, and the one that is most often broken, because nobody who can see the page ever notices it is missing.

## Frequently asked questions

### How many H1s should a product page have?

One H1 per page, and it is the product name. The H1 is the page title, and a product page has one product. Additional H1s do not add emphasis. They break the outline, and the screen reader user who navigates by headings lands on a structure that does not match the page.

### Is heading order a WCAG requirement?

Yes. WCAG 1.3.1 requires that information and relationships conveyed through presentation can be programmatically determined, and 2.4.6 requires headings to describe their topic. A heading level that skips from H1 to H3 is a structure the screen reader reports as broken, even if the visual design looks fine.

### How do I check my heading structure?

Use the headings list in the screen reader, usually Insert F6 in NVDA or the rotor in VoiceOver, and read the outline. If the outline reads like a table of contents for the page, the structure works. If it reads like a random list, it does not.

### Does the visual size of a heading have to match its level?

No, and that is the point. The visual size of a heading is a style choice, and the level is a structural one. A heading that looks like an H2 but is coded as an H4 breaks the outline, and a heading that looks small but is coded as an H2 is fine. Code the level for the structure, and style it for the design.