Linter Rule: Disallow empty headings

Rule: html-no-empty-headings

Description

Disallow headings (h1, h2, etc.) with no accessible text content.

Rationale

Headings relay the structure of a webpage and provide a meaningful, hierarchical order of its content. If headings are empty or its text contents are inaccessible, this could confuse users or prevent them accessing sections of interest.

Examples

✅ Good

erb

<h1>Heading Content</h1>

<h1><span>Text</span></h1>

<div role="heading" aria-level="1">Heading Content</div>

<h1 aria-hidden="true">Heading Content</h1>

<h1 hidden>Heading Content</h1>

🚫 Bad

erb

<h1></h1>Heading element `<h1>` must not be empty. Provide accessible text content for screen readers and SEO. (html-no-empty-headings)

<h2></h2>Heading element `<h2>` must not be empty. Provide accessible text content for screen readers and SEO. (html-no-empty-headings)

<h3></h3>Heading element `<h3>` must not be empty. Provide accessible text content for screen readers and SEO. (html-no-empty-headings)

<h4></h4>Heading element `<h4>` must not be empty. Provide accessible text content for screen readers and SEO. (html-no-empty-headings)

<h5></h5>Heading element `<h5>` must not be empty. Provide accessible text content for screen readers and SEO. (html-no-empty-headings)

<h6></h6>Heading element `<h6>` must not be empty. Provide accessible text content for screen readers and SEO. (html-no-empty-headings)

<div role="heading" aria-level="1"></div>Heading element `<div role="heading">` must not be empty. Provide accessible text content for screen readers and SEO. (html-no-empty-headings)

<h1><span aria-hidden="true">Inaccessible text</span></h1>Heading element `<h1>` must not be empty. Provide accessible text content for screen readers and SEO. (html-no-empty-headings)

References

Inspired by ember-template-lint

Linter Rule: Disallow empty headings ​

Description ​

Rationale ​

Examples ​

✅ Good ​

🚫 Bad ​

References ​