Paragraphs should not be styled to look like headings.

When a <p> element is styled with large, bold text to visually resemble a heading, sighted users may perceive it as a heading, but the underlying HTML does not communicate that structure. Screen readers and other assistive technologies rely on semantic heading elements (<h1> through <h6>) to build an outline of the page. A styled paragraph is just a paragraph to these tools, no matter how big or bold it looks.

This mismatch between visual appearance and semantic meaning creates real problems. Screen reader users often navigate pages by jumping between headings. If a section title is marked up as a <p> instead of an <h2>, that section becomes invisible to heading-based navigation. Users may skip over it entirely or struggle to understand how the page content is organized. Keyboard-only users who rely on similar shortcuts are also affected.

This rule maps to WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships), which requires that information and structure conveyed through visual presentation also be available programmatically. A paragraph styled to look like a heading conveys structure visually but fails to expose it in the document's semantics, violating this criterion at Level A.

How to fix it

Replace styled <p> elements that function as headings with the appropriate heading element (<h1> through <h6>). Choose the heading level based on where the text falls in the document's outline, not based on how you want it to look. Then use CSS to style the heading element to match your design.

A few things to keep in mind:

• Heading levels should follow a logical hierarchy. An <h2> should come after an <h1>, an <h3> after an <h2>, and so on. Skipping levels (jumping from <h1> to <h4>) makes the document structure harder to understand.
• If you need a heading-like visual style without adding the text to the document outline, consider whether the text is actually a heading. If it labels a section of content, it should be a heading element. If it is just emphasized text within a paragraph, a <strong> element with CSS may be more appropriate.
• Applying CSS classes to heading elements gives you full control over appearance without sacrificing semantics.

Examples

Incorrect: paragraph styled to look like a heading

<p style="font-size: 24px; font-weight: bold;">Our services</p>
<p>We offer a range of consulting and development services.</p>

Screen readers will read both elements as plain paragraphs. Users navigating by headings will never land on "Our services."

Correct: proper heading element with CSS

<h2 class="section-title">Our services</h2>
<p>We offer a range of consulting and development services.</p>

.section-title {
  font-size: 24px;
  font-weight: bold;
}

The <h2> element exposes the heading to assistive technologies and fits into the document outline. The CSS class controls the visual presentation separately.

Incorrect: paragraph with a CSS class mimicking a heading

<p class="heading-lg">Getting started</p>
<p>Follow these steps to set up your account.</p>

.heading-lg {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 0.5em;
}

Even with a class name that says "heading," the element is still a <p>. Assistive technologies ignore class names when determining element roles.

Correct: heading element with the same styling

<h2 class="heading-lg">Getting started</h2>
<p>Follow these steps to set up your account.</p>

.heading-lg {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 0.5em;
}

Moving the class to an <h2> keeps the same visual result while providing the correct semantics. Screen reader users can now find this section when navigating by headings.

Learn more:

W3C Reference

Understanding Info and Relationships

→

W3C Reference

H42: Using h1-h6 to identify headings

→

MDN Reference

Heading elements

→