How to Fix Heading Structure (WCAG 2.2)

Applies to: SC 1.3.1 Info and Relationships (A) · SC 2.4.6 Headings and Labels (AA) · SC 2.4.10 Section Headings (AAA)

Screen reader users often navigate by headings, so headings must reflect the real structure of the content (W3C headings tutorial).

What WCAG actually requires (and what it doesn't)

• Text that looks like a heading must be marked up as one (1.3.1), and headings must describe their section (2.4.6).
• Skipping levels (h2 → h4) and multiple h1s are not, on their own, failures of a WCAG success criterion. W3C advises that skipping ranks "can be confusing and should be avoided where possible" (W3C WAI headings tutorial), and axe reports them as best-practice rules, not WCAG violations (axe rule: heading-order). Don't over-claim them.
• Don't use headings just for styling. Bold text styled as a heading, without heading markup, can fail 1.3.1.

How to fix

1. Extract the outline (e.g. with the browser extension HeadingsMap or a screen reader's headings list).
2. Have one h1 that describes the page, then h2 for main sections and h3 for subsections.
3. Turn fake headings (<p><strong>) into real headings; turn decorative "headings" (taglines) into paragraphs.
4. Control size with CSS, not heading level.

CMS-specific steps

• WordPress: Use the Heading block and pick the level in the toolbar. Many themes already output the post title as h1, so start content at H2.
• Shopify: Product/page titles are usually the h1 in the theme. Section headings' levels are set in theme code; change them in the Liquid templates if they're wrong.
• Webflow: Select a Heading element and set H1–H6 in Element settings. Style with classes, not levels. In rich text, use the H2/H3 controls.
• Squarespace / Wix: Use the text editor's Heading 1–4 styles and not resized paragraph text. Change site-wide heading appearance in site styles, not per paragraph.

WordPress, Shopify, Webflow, Squarespace and Wix are trademarks of their respective owners. Glimscope is not affiliated with or endorsed by any of them.

What automated tools can and can't tell you: Automated checkers (including axe-core, which our monitor uses) can flag many instances of this issue, but they cannot judge everything. A human still has to check meaning and context. For scale: Deque reports that in its own sample of first-time audits, its automated tests found 57.38% of issues by volume (Deque report). That is Deque's figure for its sample, not a detection rate for any one tool, and it means a large share of issues still needs manual testing. Scanners can flag empty headings and level skips. They cannot tell whether bold text is really a heading, or whether heading text describes its section. Automated tests find only some accessibility issues; manual testing is still required. Not legal advice.

Manual checklist

• Outline reads like a sensible table of contents
• No visual headings missing markup
• Heading text is descriptive