headingContents

Reports heading elements without accessible content.

✅ This rule is included in the jsx logical and logicalStrict presets.

Heading elements (h1 through h6) must have content that is accessible to screen readers. Empty headings provide no value and are misleading to search engine crawlers and users navigating with assistive technologies.

This is required for WCAG 2.4.6 compliance.

Examples

❌ Incorrect

<h1 />

<h2></h2>

<h3> </h3>

✅ Correct

<h1>Heading Content</h1>

<h2>
  <TextWrapper />
</h2>;

<h3 aria-label="Heading" />

When Not To Use It

If you use a framework that automatically injects known good contents for heading elements, you can disable this rule.

Further Reading

• WCAG 2.4.6: Headings and Labels
• axe-core: empty-heading

Equivalents in Other Linters

• ESLint: jsx-a11y/heading-has-content