Styled <p> elements must not be used as headings
Build more accessible websites with axe DevTools Pro
Compliance Data & Impact
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
Refer to the complete list of axe 4.7 rules.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: