0

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Marc Rasmussen
  • 19,771
  • 79
  • 203
  • 364
  • You think you need to go more than 6 levels deep? Also you should only have 1 `h1` (page name) by best practices so use `h2` to `h6` instead. It is all about relationships, so anything related to your first `h2` should have `h3` to `h6` below it, then a new `h2` for any other items that are not related etc. Each `h2` should be in a `
    ` element, that is labelled using `aria-labelledby="idOfTheH2ForTheSection"`. Are you misunderstanding how heading nesting works perhaps as it is very rare to need a `h5` never mind a `h6`.
     – GrahamTheDev Oct 20 '21 at 08:34
  • 1
    See my "answer" as an example of how documents are structured generally – GrahamTheDev Oct 20 '21 at 08:42

1 Answers1

2

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

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • in your example the h2 / h3 are not in a section or an article i was under the impression that it should be covered in either of those two to allow multiple headers of the same order i.e h2 / h3 – Marc Rasmussen Oct 20 '21 at 08:43
  • 1
    I just edited, sorry! Also note this is document structure excluding `
    ` as normally that would surround everything (including your `

    `), but it is situational

     – GrahamTheDev Oct 20 '21 at 08:44