Avoid Using Paragraph Tags as Headings
Rule ID: p-as-heading
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (Experimental), WCAG 2.0 (Experimental), EN 301 549
How to Fix the Problem
Avoid using <p> (paragraph) elements styled with bold, italic, or large fonts to mimic headings. This practice creates significant accessibility barriers for screen reader users.
Instead, use semantic HTML heading elements (<h1> through <h6>) to define the structure of the content clearly:
Best Practices for Headings:
-
Start the main content area with a single
<h1>tag. -
Use subsequent heading levels (
<h2>,<h3>, etc.) to reflect the hierarchy of the page content. -
Avoid skipping heading levels. For example, don’t jump from
<h1>to<h4>without<h2>or<h3>in between. -
Ensure headings are meaningful, concise, and clearly describe the content that follows.
Screen reader users often use keyboard shortcuts to jump between headings, especially the <h1> element, to navigate directly to the main content. Without correctly tagged headings, users may have to listen to the entire page linearly, which is inefficient and frustrating.
Why it Matters
Headings are essential for communicating page structure to users who rely on assistive technologies. While sighted users can visually infer structure from font size or style, screen reader users depend entirely on semantic HTML to understand and navigate content.
Proper use of heading tags provides the following benefits:
-
Improved navigation: Screen reader users can jump quickly between headings to scan content.
-
Better comprehension: Hierarchical heading structure communicates relationships between content sections.
-
SEO boost: Search engines index headings to understand and prioritize page content.
Styled <p> elements do not carry semantic meaning, leading to accessibility issues and poor user experience.
Rule Description
Paragraph (<p>) elements should not be used to visually represent headings. Heading roles must be conveyed through the use of proper heading tags (<h1> to <h6>), which are recognized by screen readers and other assistive technologies.
The Algorithm (in Simple Terms)
This rule checks for any <p> elements that are visually styled (e.g., bold, large font, italic) to look like headings. If such elements are found, and they are not marked up using appropriate heading tags, the rule fails.