Closed
Description
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
<h*>Heading Content</h*><h*><span>Text</span><h*><div role="heading" aria-level="1">Heading Content</div><h* aria-hidden="true">Heading Content</h*><h* hidden>Heading Content</h*>🚫 Bad
<h*></h*><div role="heading" aria-level="1"></div><h*><span aria-hidden="true">Inaccessible text</span></h*>References
Inspired by ember-template-lint