Why does heading structure matter for screen reader users?

Heading structure matters because it is how most screen reader users find their way around a page. A sighted visitor glances at a product page and sees where the description, the reviews and the delivery information start. A screen reader user gets the same overview by pulling up a list of headings or jumping from one heading to the next. In WebAIM's tenth screen reader survey, 71.6% of respondents said navigating through the headings is the first thing they do to find information on a lengthy page, far ahead of using the browser's Find feature at 13.6%.⁴ If your headings are missing, vague or only look like headings, that shortcut does not work.

What WCAG asks for

Two success criteria cover headings.

• 1.3.1 Info and Relationships (level A) asks that structure shown visually can also be determined by software.¹ If text looks like a heading because it is big and bold, it should be marked up as a heading, with an h1 to h6 element. W3C lists "changes in text presentation used to convey information without appropriate markup or text" as a failure of this criterion.¹
• 2.4.6 Headings and Labels (level AA) asks that headings and labels describe their topic or purpose.² It does not require you to add headings, but the ones you have must say what the section is about. W3C notes that this matters because screen readers can present headings out of context, for example in an automatically generated list.²

Heading levels carry meaning too. W3C's headings tutorial explains that an h1 is the most important rank, a heading of the same or higher rank starts a new section, and a lower rank starts a subsection. It says skipping ranks "can be confusing and should be avoided where possible".³ Screen reader users notice: 88.8% of respondents in WebAIM's survey found heading levels very or somewhat useful.⁴

How common are heading problems?

Very. WebAIM's 2026 scan of the top million home pages found skipped heading levels on 41.8% of them, more than one h1 on 18.1%, and no headings at all on 7.5%.⁵ The average home page had 29.9 headings.⁵ In the same survey of screen reader users, missing or improper headings ranked eighth on the list of the most problematic things they meet on the web.⁴

Common heading mistakes in online stores

A simple heading outline for a product page

There is more than one valid structure. W3C's tutorial shows two common patterns: the h1 first with everything else one rank lower, or the main content heading as the h1 with navigation and sidebar headings as h2.³ A product page might look like this:

• h1 Merino crew neck jumper
• h2 Description
• h2 Size and fit
• h2 Delivery and returns
• h2 Reviews
  • h3 for each review title, if you show them
• h2 You may also like
• h2 Footer sections, such as "Help" and "Newsletter"

Keep repeated parts of the page, such as the footer, at the same levels on every page. The tutorial says "consistency across pages is more important" for fixed sections like sidebars.³

Do headings help search as well?

Headings help people scan a page, and that includes people arriving from a search engine. Be careful with stronger claims. Google's SEO Starter Guide says headings help users navigate your pages, but also that it does not matter for Google Search if you use them out of order, and that there is no ideal number of headings.⁶ Google does list headings, such as the h1, among the sources it may use when it writes the title link shown in results.⁶ So a clear, accurate h1 can shape how your page appears. That is not a promise about rankings, and no one can make one. Fix headings because they make your pages usable; treat anything else as a bonus.

Fixing headings on Shopify and WordPress

Shopify

Most heading markup on a Shopify store comes from the theme, so check the theme first. Shopify's Theme Store requires that headings h1 to h6 look visually different from each other, which helps sighted visitors see the same hierarchy.⁷ In product descriptions and pages you write yourself, use the rich text editor's heading options rather than bold text, and start at the level below the page title. If a section's heading level is wrong in the theme, a developer can change it in the section's Liquid file, or Website Mechanic can propose the fix as a pull request.

WordPress and WooCommerce

The WordPress Heading block lets you choose H1 to H6, and WordPress's own documentation says to "use headings in order" to make your page accessible.⁸ It also notes that in most themes the page title is used as the h1, so headings you add in the content usually start at H2.⁸ The Outline tab in the editor's Document Overview shows your headings so you can spot skipped levels before you publish.⁸

How to check your headings

1. Run an automated check. It finds empty headings and some structure problems on many pages at once. Jralo's free check tests your homepage and up to five linked pages against WCAG 2.2 A and AA, and reads your terms, privacy and contact pages to suggest which countries' accessibility laws are likely relevant, with a link to a guide for each (general information, not legal advice). Automated tools find many problems, not all: they cannot tell whether a heading's words describe its section.
2. Read the outline. A browser extension that lists headings, or your screen reader's headings list, shows the structure a screen reader user gets. Read only the headings: do they tell you what is on the page?
3. Jump by heading. With a screen reader on, use its heading navigation command to move from heading to heading on a product page, a collection page and checkout. Note any section you cannot reach that way.
4. Fix templates first. A wrong level in the product template is wrong on every product. Content headings can follow.

Headings are one of the quickest structure fixes. For a wider first pass, see how to check your website in 15 minutes.