Do not use <p> as a heading

WCAG 1.3.1
Info and Relationships

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

If it looks like a heading, it *must* be a heading.

Why this matters and how to fix it

Why this matters

Screen reader and keyboard users rely on headings to navigate a page quickly. If a paragraph tag is visually styled to look like a heading, assistive technologies will not recognize it as a structural section title. This breaks semantic navigation and makes the page harder to understand.

How to fix this issue

Use real heading elements (<h1>–<h6>) to convey section structure. Do not style <p> or <div> elements to visually appear as headings. Choose the heading level based on document hierarchy — not visual size.

Automated detection · Manual review recommended

Developer guidance

This often happens when designers provide text size classes (h1, h2, etc.) that get applied to non-heading elements. Provide utility classes like `.text-xl` and `.font-bold` separately from actual semantic heading tags to prevent misuse. Component libraries should expose <Heading> and enforce heading level selection.

Code examples

Incorrect Implementation

<p class="h2">Features</p>

Correct Implementation

<h2>Features</h2>

Real-World Examples

Before

<p class="section-title">Billing & Payments</p>
<!-- Screen reader: no heading → user cannot jump here -->

After

<h2 class="section-title">Billing & Payments</h2>
<!-- Screen reader: 'Heading level 2: Billing & Payments' → fast navigation -->

CSS Example (Guidance)

/* Style headings visually without encouraging misuse */
.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.5rem;
}

Manual testing

  1. 1. Open the screen reader and use the 'next heading' shortcut:
  2. • NVDA / JAWS: H
  3. • VoiceOver: VO + Cmd + H
  4. 2. Ensure that each visually prominent section title is announced as a heading.
  5. 3. Inspect elements that look like headings but are <p> or <div> elements.
  6. 4. Replace them with <h1>–<h6> based on the page hierarchy.
  7. 5. Re-test heading navigation to confirm correct structural outline.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance