These docs are for CORA 0.10, an older release. Read this page in the newest docs.
Headings need heading markup, not styled paragraphs
- Rule:
axe/p-as-heading - Checks: Styled <p> elements must not be used as headings
- WCAG: 1.3.1
- Fix class:
mechanical: A fix needs no authored text or visual decision.
Who it affects
Section titled “Who it affects”- People who use a screen reader or a braille display, most of them blind.
How to fix it
Section titled “How to fix it”A short paragraph styled to look like a heading introduces the paragraphs after it
Section titled “A short paragraph styled to look like a heading introduces the paragraphs after it”Make it a heading at the level the outline calls for, and keep its look with CSS.
<h2 class="section-title">Shipping</h2><p>Orders ship within two business days.</p><p>Tracking details arrive by email.</p>axe asks for review, such as for a paragraph in a <blockquote> or one styled like the paragraph before it
Section titled “axe asks for review, such as for a paragraph in a <blockquote> or one styled like the paragraph before it”Decide whether the text introduces the content after it. If it does, make it a heading; if it is a quote, a lead-in or a callout, leave it a <p>.
Fixes that fail
Section titled “Fixes that fail”Changing the <p> to a styled <div>
Section titled “Changing the <p> to a styled <div>”axe checks only <p> elements, so it stops reporting it, but the text is still not a heading for screen reader users.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.