Styled <p> elements must not be used as headings

Serious

What is the problem?

The "p-as-heading" rule addresses the misuse of <p> elements to visually represent headings. This often involves styling the <p> element with bold, italic, or larger font sizes.

Impacted Groups

Blind
Deafblind
Mobility

Why is this important?

Screen reader users rely on the correct HTML structure to understand the hierarchy of content on a page. When <p> elements are styled to look like headings, screen readers may not recognize them as such, making it difficult for users to navigate and understand the content.

How to solve this issue

To fix this issue, use appropriate heading elements like <h1>, <h2>, <h3>, etc., to mark headings. These elements provide the correct semantic structure, ensuring that screen readers can accurately interpret the content and guide users through the page.

Rule Information

Rule ID

p-as-heading

Severity

Serious

Manual Review Required

Yes

Rule Group

Experimental Rules

Guidelines

  • WCAG 2.1 Experimental
  • WCAG 2.0 Experimental
  • EN 301 549

Customise Guidance

You can customise each accessibility rule in SiteAlly with your own guidance, instructions and even links to your own organisation specific documentation.

Enable your website editors to resolve issues quickly with SiteAlly.

Ready to make your website accessible?

SiteAlly provides automated accessibility monitoring, detailed reports, and step-by-step guidance to help you achieve and maintain compliance.