Bold, italic text and font-size are not used to style <p> elements as a heading

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.

Why this is Important

The underlying purpose of headers is to convey the structure of the page. For sighted users, the same purpose can be achieved by using different sizes of text. This is not helpful for users of screen readers, though, because a screen reader identifies a header only if it is marked up as such. When headers are properly used, though, 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 an <h1>-<h6> used 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.

Compliance Data & Impact

User Impact: Critical
Disabilities Affected:
  • Blindness
  • Deafblindness
  • Mobility/Dexterity
Severity: Critical
Issue Type:
  • WCAG 2.0 (A): SHOULD
  • Deque Experimental
  • WCAG 2.1 (A): SHOULD
WCAG Success Criteria:
  • 1.3.1 Info and Relationships
Section 508 Guidelines:
  • Not applicable

How to Fix the Problem

Ensure Ensure p elements are not used to style headings.

Best Practice: Start the Main Content with <h1>: 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. The sub-sections of the page should each be marked 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 probably 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 will have to listen to more of the web page to understand its structure, wasting valuable time.

As with all best practice recommendations, there will be exceptions 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.

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: p-as-heading