SiteLint documentation and guidelines

Incorrect headings hierarchy

Description

Incorrect headings hierarchy refers to the improper use of HTML heading elements (H1-H6) on a webpage, resulting in a disorganized and confusing structure for users relying on assistive technologies. Proper heading hierarchy is crucial for maintaining a logical flow of content and facilitating navigation for users with visual impairments and cognitive disabilities.

Disabilities impacted

  • Visual impairments: users relying on screen readers benefit greatly from a well-structured heading hierarchy. Screen readers allow users to jump between headings, providing a quick overview of the page’s content structure. Without proper hierarchy, navigation becomes difficult and time-consuming.
  • Cognitive disabilities: individuals with cognitive impairments, learning disabilities, or attention deficit disorders rely heavily on clear headings to organize and comprehend complex information. Proper heading structure helps these users focus on relevant content and understand relationships between different sections.
  • Motor impairments: while motor impairments don’t directly impact heading hierarchy comprehension, proper structure aids keyboard navigation. Users who rely on keyboard shortcuts to jump between headings benefit from a logical hierarchy, improving overall accessibility.

Why it matters

Correct heading hierarchy matters for several reasons:

  • Improved navigation: it allows users to quickly understand the document structure and move between sections efficiently.
  • Enhanced readability: clear headings help organize content, making it easier for all users to comprehend complex information.
  • Better SEO: search engines use heading structure to understand page content, potentially improving search rankings.
  • Compliance: proper heading hierarchy contributes to meeting WCAG guidelines, ensuring legal compliance with accessibility standards.

Coding problems and solutions

Common coding problems

  • Skipping heading levels: using H2 without an H1 or jumping directly to H3 without H2.
  • Multiple H1 elements: having more than one H1 per page, which can confuse screen readers about the main topic.
  • Incorrect nesting: placing higher-level headings inside lower-level ones.
  • Styling text as headings: using CSS to make regular text look like headings instead of using proper HTML structure.

How to fix it

To resolve these issues, follow these best practices:

  1. Use a single H1 for the page title, followed by H2 for main sections, H3 for subsections, and so on.
  2. Maintain a logical flow: each heading level should represent a subtopic of the previous level.
  3. Avoid skipping levels: Always use consecutive heading levels (e.g., don’t go from H2 to H4 without an H3).
  4. Use semantic HTML: instead of styling text to look like headings, use the appropriate HTML heading elements.

Example of correct heading structure:

Correct example
<h1>Main Page Title</h1>
<h2>Section 1</h2>
  <h3>Subsection 1.1</h3>
  <h3>Subsection 1.2</h3>
<h2>Section 2</h2>
  <h3>Subsection 2.1</h3>

Known Limitations

While proper heading hierarchy significantly improves accessibility, it has limitations:

  1. Complex content structures: some pages may have complex layouts that don’t easily fit into a simple hierarchical structure.
  2. Dynamic content: pages with frequently changing content may require more flexible heading structures.
  3. Legacy systems: older websites or content management systems might have limitations in implementing proper heading hierarchy.

Resources

Standard

  • Standard: WCAG
  • Rule ID: incorrect-headings-hierarchy