On my web page, I have a long article.

Now an example of how html might look like this (just picture it being a lot longer):

<h1>Page title</h1>
<article>
 <h2>Some title></h2>
 <p>Content for that title</p>
 <h2>Some other title </h2>
 <p> some content for that other title </p>
</article>

This pattern continues.

According to WGAC, all headings should be in sequentially descending order, this is an issue here since my article might have more than 5 (h1 - h5) headers. So what can I do as best practice here?

Should each header be included in an <article> or <section> tag or can they be h2 as shown above?

CodePudding user response：

Example

<main>
  <h1>Different Front End Technologies</h1>
  <p>Introduction...</p>
  <section aria-labelledby="h2-html">
    <h2 id="h2-html">HTML</h2>
      <p>html...</p>
        <h3>Sectioning Elements</h3>
          <p>fjdfk</p>
          <h4>The Header element</h4>
          <h4>The Main element</h4>
        <h3>Inline Elements</h3>
          <p>fdsfa</p>
          <h4>The time element</h4>
          <h4>The address element</h4>    
  </section>
  <section aria-labelledby="h2-css">  
    <h2 id="h2-css">CSS</h2>
    <p>fdsafdas</p>
      <h3>The Cascade</h3>
      <h3>CSS Vars</h3>
        <h4>The :root selector</h4>
        <h4>Using a var in a property</h4> 
          <h5>Using calc() with a var</h5>
            <h6>Example using calc()</h6>
            <h6>Gotchyas using var in older browsers</h6>
          <h5>var as inline style</h5>
  </section>
  <section aria-labelledby="h2-JS">
    <h2 id="h2-JS">JavaScript</h2>
  </section>
</main>

Note how everything under a <h2> is related to that <h2>. Everything under a <h3> is related to that <h3> which is related to the <h2>. This continues down.

When there are subjects not related to each other again you can move back up to the suitable heading level.

"Skipping heading levels" is when you jump from a <h2> to a <h4> - that is the bit that can be confusing for people using a screen reader as they are likely to navigate by headings using shortcuts in their screen reader.

Bonus for screen readers

If you have a really complex document and you are sure you are not over-nesting items, then there are actually 7 heading levels as far as screen readers are concerned.

You can read more about level 7 headings here