How to fix heading order on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Identify the PHTML template responsible for the heading in question — common files include app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/view.phtml (product page title) and app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/category/view.phtml (category page title).
2. Open the file in your theme (always work in a custom theme, never the base theme) and locate the heading tag. Change it to the correct semantic level, e.g., replace <h3 ...> with <h2 ...>, keeping all classes and attributes intact.
3. For CMS pages and blocks (Content → Pages or Content → Blocks in the Admin), click 'Edit' on the relevant page or block and use the WYSIWYG editor's heading-style dropdown to select the correct heading level for each heading in the content.
4. Run bin/magento cache:flush from the command line after saving template changes to clear the full-page cache.
5. Use the axe DevTools browser extension to verify heading order on the live storefront.

What is heading order?

HTML headings (H1 through H6) are not just visual styling — they form an invisible outline of your page that screen readers and search engines read to understand your content structure. "Heading order invalid" means your page skips heading levels (for example, jumping from an H1 straight to an H4, or using an H3 before an H2), or uses headings out of sequence. Think of headings like the chapters and sub-chapters of a book: if you skip from Chapter 1 straight to Sub-sub-section 4, the reader loses the thread. The fix is to ensure every heading on every page flows in a strict, unbroken hierarchy: one H1 (the page title), then H2s for major sections, then H3s for sub-sections within those, and so on — never skipping a level on the way down.

Screen reader users — people who are blind or have low vision — navigate pages almost exclusively by jumping between headings. A broken heading order disorients them, makes your store harder or impossible to use, and can expose you to accessibility lawsuits under the ADA (USA), AODA (Canada), EAA (EU), and similar laws that are increasingly enforced against ecommerce businesses. Search engines like Google also use heading structure to understand what a page is about and which content matters most; a well-structured heading hierarchy reinforces your keyword relevance signals and can improve organic rankings. Finally, fixing heading order removes a WCAG 2.1 Level AA failure (Success Criterion 1.3.1, "Info and Relationships"), which is the baseline standard most accessibility audits and legal compliance frameworks reference.

See the complete Heading order guide for every platform and the full background.