• June 1, 2025

Ensuring Headings Contain Accessible Content

Rule ID: empty-heading
Ruleset: axe-core 4.10
User Impact: Minor
Guidelines: Deque Best Practice

How to Fix the Problem

To make your webpage accessible and semantically correct, ensure that all heading elements (<h1> through <h6>) contain meaningful and visible content:

1. Add Text to Empty Headings
   Every heading must include text that conveys purpose or structure. For example:

   html

   KopierenBearbeiten

   <h2>Our Services</h2>


   Instead of:

   html

   KopierenBearbeiten

   <h2></h2>


2. Ensure Heading Text is Screen Reader Accessible
   Do not hide headings from assistive technologies using:

   • aria-hidden="true"

   • display: none (CSS)

   Example of what not to do:

   html

   KopierenBearbeiten

   <h3 aria-hidden="true">Company Info</h3>


3. Use Headings for Structure Only
   Don’t use heading tags for visual styling unless they are semantically appropriate. Headings should provide an outline of your content hierarchy. Use CSS for styling non-heading text.

4. Follow a Logical Heading Order
   Structure your page with headings in descending order of importance:

   • <h1> for main titles

   • <h2> for major sections

   • <h3> for subsections, and so on

5. Keep Headings Clear and Descriptive
   A user should understand the page’s content by navigating only the headings. If that’s not possible, rewrite them for clarity and context.

Why it Matters

Screen readers allow users to navigate a page by jumping between headings. An empty or hidden heading disrupts this experience:

• Users may hear “heading” with no content, leading to confusion.

• Hidden headings deny users structural cues needed for efficient navigation.

Headings not only benefit accessibility—they improve SEO. Search engines index headings to determine the relevance of page content. Well-structured headings improve content discoverability and ranking.

Proper heading use provides both a semantic outline for assistive technologies and a visual guide for sighted users, promoting better comprehension and usability across all devices and user types.

Rule Description

Any <h1>–<h6> element on a page should not be empty. Headings must contain text and that text should be readable by screen readers. This helps define page structure and assists navigation for users relying on assistive tech.

The Algorithm (in Simple Terms)

1. Identify all heading tags on the page (<h1> to <h6>).

2. Check if each heading contains any visible, screen-reader-accessible text.

3. Flag any heading that is:

   • Completely empty

   • Contains hidden or visually removed text (e.g., display: none or aria-hidden="true")