Heading levels skipped on Shopify
What this is
3 headings jump more than one level (for example H2 to H4). Screen reader users navigate by headings, and gaps make the outline confusing.
Who it affects
- Screen reader users
- People with cognitive disabilities
Standards
How to fix it
- Make heading levels follow the outline of the page: H1, then H2, then H3.
- Choose the level by structure, then size it with CSS – never pick a heading level because of its default size.
On Shopify
Edit the section heading tag in the theme customizer or the section's Liquid (`<h2>` vs `<h3>`).
Other platforms
Prompt for an AI coding tool
Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.
Check your own website
Paste a web address. The free scan checks one page and shows what it finds.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.