empty-heading
Web validation
Empty heading elements such as <h1> through <h6> with no content, should be avoided. These headings provide structural information that is essential for users who rely on assistive technologies to understand and navigate the page.
Even if an empty heading is technically valid HTML, it does not align with the intended semantic purpose of headings, which is to introduce or label sections of content. Inaccessibly empty headings can confuse users and hinder navigation, especially for screen reader users who rely on heading outlines to explore content.
Pass Patterns
Heading with visible text content
This heading contains visible text content that accurately describes the section it introduces.
<h2>Frequently Asked Questions</h2>Heading with an image that has a text alternative
The heading's only content is an image, but its alt text gives the heading an accessible name.
<h2><img src="/images/logo.svg" alt="Evinced" /></h2>Fail Patterns
An empty <h1>
This heading element is completely empty and has no accessible name, which offers no information to assistive technology users.
<h1></h1>Heading with only non-text content
This heading element has an image content that does not have a text alternative, effectively leaving the heading empty.
<h1>
<img src="/images/logo.svg" />
</h1>Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Skim through the page using the screen reader headings shortcut (NVDA
H, VoiceOverControl + Option + Command + H).
Expected result: All headings have text that describes the content below them.
Actual result: The screen reader announces only the heading level (for example, “heading level 1”) with no text.
FAQ
Why is this validation considered a best practice?
While empty headings may pass HTML validation or be technically allowed with ARIA labeling, they fail to deliver the intended user experience and break the semantic purpose of headings. Providing visible and accessible content ensures clarity and structural consistency.
Why is this issue marked as Minor?
This issue does not typically block access to content but may disrupt navigation and create confusion for assistive technology users. It also reduces the clarity and structure of the page for all users and can impact SEO and page comprehension.