no-empty-headings.md

no-empty-headings

✅ The extends: 'recommended' property in a configuration file enables this rule.

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.

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

Examples

This rule forbids the following:

<h*></h*>

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

<h*><span aria-hidden="true">Inaccessible text<span></h*>

This rule allows the following:

<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*>

Migration

If violations are found, remediation should be planned to ensure text content is present and visible and/or screen-reader accessible. Setting aria-hidden="false" or removing hidden attributes from the element(s) containing heading text may serve as a quickfix.

References

• WCAG SC 2.4.6 Headings and Labels