SiteLint documentation and guidelines

Empty heading

Description

Headings in HTML are used to structure content and provide a hierarchy of information. An empty heading element is a heading tag (e.g., <h1>, <h2>, etc.) that contains no text or content. Empty headings can create accessibility issues, as they provide no context or information for users, particularly those relying on screen readers. Properly used headings help users understand the organization of the content and navigate through the webpage effectively.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers depend on headings to navigate and understand the structure of a webpage. Empty headings provide no information and can cause confusion.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and descriptive headings that help them process and understand the content more easily.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices rely on properly structured headings to move through the content efficiently.

Why it matters

Headings are essential for creating an accessible and well-organized webpage. They provide a logical structure that helps users navigate and understand the content. Empty headings disrupt this structure, making it difficult for users to comprehend the organization of the page and locate information. Ensuring that all heading elements contain meaningful content enhances the overall accessibility and usability of a webpage.

Coding problems and solutions

Common coding problems

  • Empty heading tags: heading elements that contain no text or content.
  • Placeholder text in headings: headings that contain placeholder text instead of meaningful content.
  • Misuse of heading tags: using heading tags for styling purposes rather than their semantic meaning.

How to fix it

Ensure headings contain text

Make sure every heading element includes descriptive text that conveys the section’s purpose or content.

Incorrect example
<h1></h1>
<h2></h2>
Correct example
<h1>Main Title</h1>
<h2>Section Title</h2>

Replace placeholder text with meaningful content

Avoid using placeholder text in headings and ensure they accurately describe the content that follows.

Incorrect example
<h2>Heading</h2>
<p>Information about the company.</p>
Correct example
<h2>About Us</h2>
<p>Information about the company.</p>

Use headings semantically

Use heading tags to define the structure and hierarchy of the content, not just for styling.

Incorrect example
<div style="font-size: 24px;">Our Services</div>
<p>Details about the services offered.</p>
Correct example
<h3>Our Services</h3>
<p>Details about the services offered.</p>

Known limitations

  • Dynamic content: ensure that dynamically generated headings also contain meaningful content.
  • Complex documents: for documents with complex structures, carefully plan and test the heading hierarchy to ensure it remains logical and accessible.
  • Testing across devices: test headings across different devices and screen readers to ensure they provide the necessary context and information.

Resources