redundant-heading-semantics
Web validation
<h1>-<h6>) for actual headings and not for regular text.Headings describe the topic or purpose of the content that follows them, and assistive technology users rely on them to understand the page structure and navigate between sections. When regular text, such as a promotional line, a price, or a date, is wrapped in a heading tag, it appears in the screen reader's headings list as if it started a new section. Users may get an incorrect mental image of the page's content and structure, and navigating by headings becomes less useful and less intuitive.
It is a best practice to consult the product manager or UX designer about the purpose of the element and adjust its type accordingly. If you can't consult with one of these stakeholders, use the element that matches the text's purpose, such as <p> for a paragraph or <strong> for important text, or a <div> or <span> element. Use CSS to give the text a larger or bolder appearance.
Pass Patterns
Heading used for a real section
The <h2> introduces the content that follows it.
<h2>Shipping options</h2>
<p>Choose standard or express delivery.</p>Emphasized text styled with CSS
The promotional line looks prominent, but it is a paragraph, so it is not exposed as a heading.
<p class="promo-text">Free shipping on orders over $50</p>
<style>
.promo-text { font-size: 1.5rem; font-weight: bold; }
</style>Fail Patterns
Heading tag used to make text bigger
The <h3> is used only for its larger text. It does not introduce a section of content.
<h3>Free shipping on orders over $50</h3>
<p>Browse our latest collection below.</p>Heading tags used for card details
The price and date are wrapped in headings, so each card adds extra entries to the headings list.
<div class="product-card">
<h3>Wireless headphones</h3>
<h4>$89.99</h4>
<h5>Available from June 1</h5>
</div>WCAG techniques
Sufficient techniques
Failure techniques
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Open the screen reader's headings list, or use its heading navigation key (for example, H in NVDA and JAWS).
- Check whether each heading introduces a section of content.
Expected results: Every entry in the headings list describes the topic or purpose of the content that follows it.
Actual results: Some entries are regular text, such as promotional lines, prices, or dates, that do not start a section.
Inspecting the browser dev-tools
- Inspect the text that is announced as a heading in your browser's dev tools.
- Check its element, and whether it has
role="heading". - Compare it with the content that follows it.
Expected results: Heading elements are used only for text that introduces a section.
Actual results: A heading element or role="heading" wraps text that does not introduce any content.
FAQ
How does this issue relate to 1.3.1 Info and Relationships?
SC 1.3.1 requires the structure conveyed in code to match the structure of the content. When regular text is marked up as a heading, the code exposes a section that does not exist, so the structure available to assistive technology does not represent the content correctly.
Why is this issue marked as Moderate?
The content is still available, but screen reader users get a misleading picture of the page structure, and extra entries make the headings list harder to use for navigation. Users are not blocked, but finding the right section takes more effort, so it is rated moderate.
How do I make text look like a heading without making it one?
Use the element that matches the text's purpose, such as <p> or <strong>, and style it with CSS. Heading tags should be chosen for their meaning, not for their default font size.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.3.1 Info and Relationships (A) | Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. |
| EN 301 549 | 9.1.3.1 Info and Relationships | Same as the WCAG text. |
| 508 Trusted Tester | 1.3.1-heading-determinable, 10.B | Each programmatically determinable heading is a visual heading and each visual heading is programmatically determinable. |