Bold, italic text and font-size are not used to style <p> elements as a heading
p elements must not be used to represent headings because the structure of the document cannot otherwise be determined by screen reader users.
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
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.
How to Fix the Problem
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.
The Algorithm (in simple terms)
Ensures that paragraph elements do not use italic, bold or font size to give the appearance of headings.