require headings to have textual content (empty-heading)

Assistive technology such as screen readers require textual content in headings. The content cannot be whitespace only.

Each heading should make sense on its own and properly describe the related section. Assistive tools may build a list of headings to help the user navigate between headings, a feature which can be confusing when headings are empty or non-descriptive.

See also WCAG G130: Providing descriptive headings.

Rule details

Examples of incorrect code for this rule:

<h1></h1>
<h2><span></span></h2>

error: <h1> cannot be empty, must have text content (empty-heading) at inline:1:2:
> 1 | <h1></h1>
    |  ^^
  2 | <h2><span></span></h2>


error: <h2> cannot be empty, must have text content (empty-heading) at inline:2:2:
  1 | <h1></h1>
> 2 | <h2><span></span></h2>
    |  ^^


2 errors found.

Examples of correct code for this rule:

<h1>Lorem ipsum</h1>
<h2><span>Dolor sit amet</span></h2>

Whitespace

Text with only whitespace is also considered empty.

<h1> </h1>

error: <h1> cannot be empty, must have text content (empty-heading) at inline:1:2:
> 1 | <h1> </h1>
    |  ^^


1 error found.