Bold and Italic Not Used to Style Paragraphs as Headings: How to Fix It

What this check flags

This is the axe-core p-as-heading rule. It looks for a <p> that has been dressed up — bold, italic, or a jumped-up font size — so it looks like it introduces a new section, while the markup underneath is still an ordinary paragraph. The stakes are concrete: screen-reader users navigate by pulling up a list of headings and jumping between them, and a fake heading never appears in that list, so entire sections become invisible to them and the document outline crawlers build goes flat. It maps to WCAG 2.1 SC 1.3.1 Info and Relationships (Level A), which says structure you show with styling has to exist in the code too.

A real failing example

This is the pattern that trips the rule every single time — a paragraph bolded and enlarged to fake a section heading:

<p style="font-size:26px; font-weight:700;">Shipping & Returns</p>
<p>We ship within two business days. Returns are accepted for 30 days.</p>

<p><b>Warranty Coverage</b></p>
<p>Every unit carries a two-year limited warranty.</p>

Both “Shipping & Returns” and “Warranty Coverage” read as section titles to a sighted visitor and as nothing to everyone else. The fix is to promote them to genuine headings and keep the look through CSS:

<h2>Shipping & Returns</h2>
<p>We ship within two business days. Returns are accepted for 30 days.</p>

<h2>Warranty Coverage</h2>
<p>Every unit carries a two-year limited warranty.</p>

The heading now lands in the screen reader’s heading list, feeds the page outline, and you still control the size and weight — you just do it in a stylesheet instead of inline on a paragraph.

Fake heading vs. real heading, side by side

The only column the fake heading wins is the last one — and CSS hands that to the real heading for free. There is no upside left to faking it.

How to detect it

1. Screaming Frog — crawl the site, then check the H1 and H2 tabs. Pages that clearly have section titles on screen but show few or no headings in these columns are your suspects; open them and view the source to confirm the titles are bolded paragraphs.
2. axe DevTools — run the browser extension on the page and look for the p-as-heading violation. It highlights each offending paragraph in the DOM so you can jump straight to it.
3. Lighthouse — the Accessibility audit surfaces heading-order and structure problems; a page that scores well visually but flags structural issues is often faking headings with styled paragraphs.
4. View Source / DevTools Elements — right-click a title that looks like a heading and inspect it. If it is a <p>, <span>, or <div> with font styling rather than an <h2>–<h6>, that is the failure.

How to fix it

1. Find every paragraph doing a heading’s job — anything bolded, enlarged, or set apart to introduce content below it.
2. Change the tag to the correct level: <h2> for a top section, <h3> for a subsection under it, and so on. Do not skip levels for looks.
3. Move the visual styling into a CSS class on the heading. A heading can be any size you want; browsers do not force you to keep the default look.
4. Check the resulting outline top to bottom — one <h1>, then a logical descent through <h2> and <h3> with no gaps.
5. Re-run axe or Lighthouse to confirm p-as-heading is clear.

In WordPress this usually comes down to editors bolding a line of body text instead of using the Heading block, or a page-builder module set to a paragraph element with a big font. Both are quick swaps once you know where to look.

Common mistakes

• Fixing the tag but keeping the mess. Promoting a paragraph to <h4> when the section above it is an <h2> creates a skipped level. Match the heading to where it actually sits in the hierarchy.
• Bolding a whole paragraph of real prose. The rule targets short, title-like text. A genuinely bold sentence inside a paragraph is fine — do not turn it into a heading.
• Reaching for role="heading". An ARIA role can work, but a native <h2> is simpler, more robust, and less to maintain. Use the real element first.

FAQ

Does this rule hurt my SEO or just accessibility?

Both. Headings are one of the structural signals search engines use to understand how a page is organised, and a bolded paragraph gives them nothing. Fixing it improves the machine-readable outline for crawlers and the navigable outline for assistive tech at the same time. See our guide on how to structure headings for SEO.

Can I make a real heading look small?

Yes. There is no rule that an <h3> has to be big and bold. Use the correct tag for structure, then style it however the design calls for — small, light, uppercase, whatever fits. The tag carries the meaning; CSS carries the look.

What’s the difference between this and a broken heading order?

This rule is about paragraphs pretending to be headings. A broken order is about real headings in the wrong sequence, like an <h2> jumping straight to an <h4>. They often show up together. Our note on missing heading hierarchy covers the sequencing side.

Is one styled paragraph really worth fixing?

If it functions as a section title, yes — it is a genuine navigation dead end for screen-reader users, and the fix is a one-line tag change. This sits under the broader relationship between accessibility and SEO, where the same fix pays off twice.

Where does this fit in semantic HTML overall?

It is a classic case of using an element for its appearance instead of its meaning — the exact thing semantic HTML exists to prevent. Pick the tag that describes the content, then style it.