FAQ: Why can't we automatically fix skipped heading levels?

Background

Headings can be H1 (or <h1>)  to H6 (<h6>). 

<h1> defines the most important heading. <h6> defines the least important heading

Headings should be used to create sections and subsections within the content of the page - this allows people to scan the page and get an overview of the contents. For sighted readers the different headings levels are communicated via heading prominence (size and weight) while for non-visual readers the HTML markup gives this information. 

Nesting

Headings may be nested as subsections to reflect the organisation of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:

1. h1 Beetles
   1. h2 Etymology
   2. h2 Distribution and Diversity
   3. h2 Evolution
      1. h3 Late Paleozoic
      2. h3 Jurassic
      3. h3 Cretaceous
      4. h3 Cenozoic
   4. h2 External Morphology
      1. h3 Head
         1. h4 Mouthparts
      2. h3 Thorax
         1. h4 Prothorax
         2. h4 Pterothorax
      3. h3 Legs
      4. h3 Wings
      5. h3 Abdomen

( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements ) 

 

What about when we've accidentally skipped heading levels

The issue that we are trying to solve here, is that Headings should not skip levels eg. from H2 to H4. This is so that the relative sectioning is clear when scanning the page.

A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.

Is this a WCAG failure? 

This isn't a WCAG failure, but an accessibility best practice. 

What can be automated and why? 

Automated tests can only pick up when a heading level has been skipped, but not when the wrong heading level has been used. (for example, if multiple H2s have been used on the page, no error will be reported, even if strictly speaking some H2s should be H3s or H4s). 

This is because automated tests can't check the contextual information - they can't know whether one section is or should be a sub-section of the previous, or if really it is a sibling section. 

For this reason we also can't script a fix to check what heading levels something should be. 

Is there a quick way to check a page?

Once you've saved a page you can use a tool like Sa11y or HTML Heading Highlighter to see the structure of the page.