Back to Info and Examples for Accessibility Insights for Web
p-as-heading
<p> elements must not be styled to look like headings.
Why it matters
Headings are used to convey the structure and hierarchy of the content displayed on the page. Headings should be denoted by the use of <h1> through <h6> elements in hierarchical order. When these headings are improperly ordered or <p> elements are styled to look like headings, the heading structure isn’t defined in a way that assistive technologies can recognize. As a result, screen reader users won’t be able to use the navigational structure within a page.
How to fix
Good:
- Make sure that
<p>elements are not styled to serve as headings.
Better:
- Re-implement headings using the appropriate heading tags (
<h1>through<h6>) or userole=”heading”andaria-levelattributes on the element which is visually styled to serve as a heading.
Example
Fail
<p> element with a bold style to serve as the primary heading of the page. The <p> element might look like a heading, but it will not be communicated to screen readers as a heading.<head>
<title>Cooking techniques</title>
</head>
<body>
<p><b>Cooking techniques</b></p>
... some text here ...
<h2>Cooking with oil</h2>
... text of the section ...
<p><b> Sautéeing </b></p>
Pass
<h1> element for the primary heading, and <h2> and <h3> elements to introduce the major sections. This structure of the document can be communicated to screen readers.<head>
<title>Cooking techniques</title>
</head>
<body>
<h1>Cooking techniques</h1>
... some text here ...
<h2>Cooking with oil</h2>
... text of the section ...
<h3>Sautéeing</h3>
About this rule
This rule passes if the following are true:
- paragraph elements do not use italic, bold, or font size to give the appearance of headings.
More examples
Understanding Success Criterion 1.3.1: Info and Relationships
Organizing a page using headings
Using h1-h6 to identify headings
Providing heading elements at the beginning of each section of content