Accessibility rule: Headings are not structured, explained

Organizing web pages by headings helps users get a sense of the page’s organization and structure. Properly nested headings present both visual and programmatic levels of importance. This check inspects if heading levels are used hierarchically so that no heading levels are skipped throughout the page.

Here is an example of a correctly nested heading structure:

• H1:Siteimprove solutions
  • H2:Inclusivity
    • H3:Quality Assurance
      • H4: Broken links
      • H4: Readability
    • H3: SEO Audit
    • H3: Policy
    • H3:Accessibility
      • H4: Confirmed issues
      • H4: Potential issues 
      • H4: PDF issues
  • H2: Content Experience
  • H2: Marketing Performance

Who is impacted by this barrier?

When page content is organized using headings, all users are able to skim through the content easily and get a sense of how the content is structured. Screen readers and assistive technologies rely on heading tags (<h1> - <h6>) to identify headings. If the heading skips a level, the user might wonder if they are missing some important content or context. If the text is only enlarged, bolded, or emphasized, but the correct heading tag is not used, screen readers will not interpret it as a heading. WebAIM screen reader user survey 9, concluded that almost 87% of respondents find heading useful.
Note: This rule is not required for conformance to any accessibility requirements, but it is a best practice.

How does the check work?

The rule checks that every element, that has the role of a heading, is nested hierarchically. You can read more about the SIA-R53 rule in Alfa, Siteimprove’s open source accessibility conformance testing engine.

How do I troubleshoot the issue?

You can open the HTML view in the Siteimprove page report to inspect, that the heading tags are nested correctly.
In the example page report below, an H3 heading, <h3>Chapter one</h3>, skips one heading level, when nested under an H1 heading called <h1>Part one</h1>. And the H6 heading. <h6>Chapter one</h6> skips 3 heading levels, when nested under the H2 heading <h2>Part two</h2>.