What This Rule Checks
Every heading element on a webpage (from <h1> to <h6>) should contain meaningful content that is accessible to screen readers. If a heading is empty or its content is hidden from assistive technology (e.g., via aria-hidden=”true” or display: none), users of screen readers will not be able to navigate or understand the structure of the webpage.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Screen reader users navigate pages using heading lists. Empty headings appear in this list as blank entries, disrupting navigation flow and wasting the user’s time. They also suggest broken or incomplete page structure.
How to Fix
Ensure Headings Are Not Empty:
All heading elements should contain clear and meaningful text. Avoid using <h1> through <h6> elements with no content.
Make Sure Headings Are Accessible to Screen Readers:
Ensure that heading text is not hidden using CSS (display: none) or ARIA attributes (aria-hidden=”true”).
Code Examples
<!-- Empty heading elements -->
<h2></h2>
<h3></h3>
<h2>
<span class="icon"></span>
</h2>
Copy
<!-- Headings with meaningful content -->
<h2>Contact Information</h2>
<h3>Billing Address</h3>
<h2>
<span class="icon" aria-hidden="true"></span>
Settings
</h2>
Copy
Common Mistakes to Avoid
- Using heading elements as spacers or for visual styling only.
- Including only icons or images in headings without text content.
- Dynamically creating headings that remain empty until JavaScript populates them.
Tip: Proper document structure enables assistive technologies to present content meaningfully. Headings, lists, and semantic HTML elements create a navigable outline of the page that screen reader users depend on.