Make sure headings have discernible text

The empty-heading rule checks that all heading elements (<h1> through <h6>) contain visible and accessible content. Headings help screen reader users navigate a page efficiently, so empty or hidden headings reduce usability and can cause confusion.

What is being tested?

This rule verifies that:

• All heading elements contain text or other accessible content.
• The content is not hidden with CSS (like display: none) or with aria-hidden="true".

Correct markup examples

<h1>Welcome to Our Site</h1>
<h2>About Us</h2>
<h3>Our Mission</h3>

Incorrect markup examples

<h1></h1>

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

Why it matters

Screen readers announce the presence of heading tags to users. If a heading is empty or hidden, it creates confusion or prevents users from understanding the page’s structure. Proper, meaningful headings help all users—including those using assistive technologies—quickly grasp the layout and purpose of content.

Using heading markup correctly (<h1> through <h6>) only for actual headings improves both accessibility and search engine optimization.

Best practices

• Ensure all headings have meaningful, non-empty content.
• Avoid using CSS or aria-hidden="true" to hide heading text from screen readers.
• Use headings to convey the logical structure of your content and follow a clear, hierarchical order.