Styled <p> elements must not be used as headings

Rule ID: p-as-heading
Ruleset: axe-core 4.6
User Impact: Serious
Guidelines: WCAG 2.1 Experimental, WCAG 2.0 Experimental

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Compliance Data & Impact

User Impact

Serious
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind
  • Mobility

Standard(s)

  • WCAG 2.1 Experimental
  • WCAG 2.0 Experimental

WCAG Success Criteria [WCAG 2.1 Experimental]

  • 1.3.1: MUST: Info and Relationships

WCAG Success Criteria [WCAG 2.0 Experimental]

  • 1.3.1: MUST: Info and Relationships

How to Fix the Problem

Ensure p elements are not used to style headings.

Best practice: Start the main content with an h1 element:

Usually, the best practice is to start the main content of a web page with a level 1 heading (h1), with no other headings before this high-level heading. Mark sub-sections of the page as level 2 headings (h2). If there are sub-sections within the level 2 sections, they should be marked as level 3 (h3) and so on. Anything that comes before the main content of the page should not be marked up with any headings at all, though this is not an iron-clad rule. One of the main reasons that the h1 should appear at the beginning of the main content is because screen reader users can use keyboard shortcuts to navigate directly to the first h1, which, in principle, should allow them to jump directly to the main content of the web page. If there is no h1, or if the h1 appears somewhere other than at the start of the main content, screen reader users have to listen to more of the web page to understand its structure, wasting valuable time.

As with all best practice recommendations, exceptions exist in which it doesn't make sense to start the content with h1, or when it may be best to put other headings before the content, but the exceptions do not apply to the vast majority of web pages.

Why it Matters

The underlying purpose of headers is to convey the structure of the page. Sighted users can see structure by using different sizes of text. Screen reader users, though, require heading elements to be marked up explicitly. When heading elements are properly applied the page becomes much easier to navigate for screen reader users and sighted users alike.

In the same way that sighted users can glance at a page and get a sense of its contents, users of screen readers can do the same by navigating through headings. Well written and properly ordered headings can save users, especially those who use screen readers, a lot of time and frustration.

The purpose of headings is to describe the structure of the webpage, not just highlight important text. They should be brief, clear, unique, and marked with h1 through h6 elements in hierarchical order. All of these qualities make headings are a valuable tool for users of screen readers. In the same way that sighted users can glance at a page and get a sense of its contents, users of screen readers can do the same by navigating through headings. Well written and properly ordered headings can save users, especially those who use screen readers, a lot of time and frustration.

In addition to making the page more accessible, headings have other benefits, since search engines use headings when filtering, ordering, and displaying results. Improving the accessibility of your site can also have the effect of making your page more findable.

Rule Description

Styled p elements must not be used to represent headings because the structure of the document cannot otherwise be determined by screen reader users.

The Algorithm (in simple terms)

Ensures that paragraph elements do not use italic, bold or font size to give the appearance of headings.

Resources

Other Resources

You may also want to check out these other resources.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: