axe-core p-as-heading error: paragraph styled as heading

axe-core p-as-heading error: paragraph styled as heading - how to fix it

TL;DR

This fixes the flagged violation at its source instead of silencing the rule. A paragraph is styled to look like a heading, so the document outline misses it and screen readers cannot navigate to it. Follow the steps, re-run the scan, and gate the rule in CI so it stays fixed.

The error, verbatim

axe-core p-as-heading error: paragraph styled as heading

Fix it step by step

Step 1

Replace the styled paragraph with a real heading element at the correct level.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 2

Fix the heading order around it so no levels are skipped.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 3

Keep the visual styling via CSS classes on the heading element.

Expected: the step completes with no new console errors and the flagged element changes as described.

Step 4

Re-run axe and check the heading outline: every visual heading must be a real heading.

Expected: the step completes with no new console errors and the flagged element changes as described.

When to use this skill

• Your scan report lists this exact rule or failure
• You are clearing automated accessibility failures before release or audit
• A CI accessibility gate is red because of this item

When NOT to use this skill

• Bold large text is not a heading; the outline is what matters.
• The issue only appears in manual screen-reader testing and no automated rule flags it
• You are doing a full manual WCAG audit; this skill covers one automated check

Compatibility

axe-core 4.8+ (rule p-as-heading, WCAG 1.3.1).

Variant phrasings

axe p-as-heading: paragraph styled as heading

Same underlying issue and the same fix. Searchers phrase it different ways; the remediation does not change.

Why it happens

A paragraph is styled to look like a heading, so the document outline misses it and screen readers cannot navigate to it. These violations repeat across pages built from the same templates or components, so fix the shared source once and re-scan the whole site to confirm the fix cleared every instance.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_0SDu5Bo8m7Obkf-nzOvh1g