SiteLint documentation and guidelines

No headings

Description

Headings in HTML provide a structured way to organize and present content, making it easier for users to understand the hierarchy and flow of information. Headings (<h1> to <h6>) are critical for accessibility, as they allow screen readers and other assistive technologies to navigate and interpret content effectively. When headings are missing, the document structure can become unclear, leading to a poor user experience.

Disabilities impacted

  • Visual impairments: users with visual impairments rely on screen readers to navigate through headings. Without headings, they cannot easily understand the structure and main topics of the content.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and structured content. Headings help break down information into manageable sections, making it easier to process.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices depend on headings to move quickly between sections.

Why it matters

Headings provide a logical structure and hierarchy to web content, enhancing readability and navigation. Without headings, users may find it difficult to understand the organization of the content, leading to confusion and frustration. Properly structured headings improve the accessibility and usability of a webpage for all users.

Coding problems and solutions

Common coding problems

  • No headings at all: the webpage lacks headings entirely, making the content difficult to navigate and understand.
  • Incorrect heading hierarchy: headings are used, but the levels are not in a logical order (e.g., skipping from <h1> to <h3>).
  • Non-semantic use of headings: using headings for styling purposes without considering the document structure.

How to fix it

Include headings in your content

Ensure that your content includes headings to create a clear structure.

Incorrect example
<div class="title">Main Title</div>
<p>Introduction to the content.</p>
<div class="subtitle">Subsection Title</div>
<p>Details about the subsection.</p>
Correct example
<h1>Main Title</h1>
<p>Introduction to the content.</p>
<h2>Subsection Title</h2>
<p>Details about the subsection.</p>

Use correct heading hierarchy

Ensure that headings follow a logical, nested order.

Incorrect example
<h1>Main Title</h1>
<h3>First Subsection</h3>
<h2>Sub-subsection</h2>
<h4>Second Subsection</h4>
Correct example
<h1>Main Title</h1>
<h2>First Subsection</h2>
<h3>Sub-subsection</h3>
<h2>Second Subsection</h2>

Use headings semantically

Use headings to indicate the structure of your content, not just for styling.

Incorrect example
<h2 style="font-size: 24px;">About Us</h2> <!-- Using headings purely for styling -->
<p>Information about the company.</p>
Correct example
<h2>About Us</h2>
<p>Information about the company.</p>

Known limitations

  • Complex documents: for complex documents, ensure that all sections and subsections are appropriately labeled with headings to maintain a clear structure.
  • Dynamic content: ensure that dynamically generated content includes proper headings to maintain accessibility.
  • Consistency across pages: ensure that headings are used consistently across all pages of a website to provide a uniform user experience.

Resources