Best practice for HTML headings when section nesting is 7 deep

Question

My application creates HTML, and it genuinely leads to semantically correct nesting of section and article elements that might be 7 or more deep. For example, leaving out the clutter, nested like:

html
  body
    section
      section
        section
          article
            article
              article

Each sectioning content (section, article) and sectioning root (body) has a heading. To meet accessibility guidelines for a good screen reader experience, the hN are numbered according to depth, even though HMTL5 suggests they could all be h1. So like:

html
  body
    h1
    section
      h2
      section
        h3
        section
          h4
          article
            h5
            article
              h6
              article
                h?

Once I am this deep, is it OK to just use h6 no matter how deep it goes? Also, should I use aria attributes role="heading" aria-level="7" and so on? What is the current best practice in this situation?

Centerpiece

Answer 1

Your suggestion appears to be a best practice as it is used in example to meet WCAG 2.1 success criteria under ARIA12 Using role=heading to identify headings.

The second example from the page states the following:

This example demonstrates how to implement a level 7 heading using role="heading" and the aria-level attribute. Since HTML only supports headings through level 6, there is no native element to provide these semantics.

...
<h5>Fruit Trees</h5>
...
<h6>Apples</h6>
<p>Apples grow on trees in areas known as orchards...</p>
...
<div role="heading" aria-level="7">Jonagold</div>
<p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p>

You can apply role and level to any elements as long as it doesn't override the implied semantics of the element. For example you can put them on a div element, but you can't put a role on a button element since it has an implied role of button, and you can't an aria-level on a h1...h6 since there is already an implied level on those. See Document conformance requirements for use of ARIA attributes in HTML for more info.

Psilocybin

Does the level 7 heading have to be a div, or could it be an h6 with those attributes? – Woollen

@DavidFarmer W3C says that since hN imples role="heading" that explicitly assigning that role to an hN is not recommended. It is not clear what the position is about leaving off the role but setting the aria-level to 7. – Centerpiece

@DavidFarmer. I updated my answer to address putting a level on an h6 element. – Psilocybin

@DavidFarmer It seems there are two options. (1) We can use h6 once we've reached that depth, even if we really go deeper. The consequence is that things that are "really h7, h8,..." will be treated as h6. For example, flattened in a TOC tree. Or (2) use something like a div as in the example here. One consequence is that some heading-based tools will not see/respect the aria attributes and leave that content out. For example, a TOC tree might leave out things at depth 7+. I think I prefer (1). – Centerpiece

Answer 2

HTML and ARIA by extension defines 6 heading levels. Although <div role="heading" level="7"> is technically correct, it isn't universally recognized as being an heading of level 7 by all screen readers and other assistive tools. Jaws, for example, consider that any element with an aria-level attribute with a value outside 1-6 is an heading of level 2. Jaws' interpretation isn't against ARIA specification.

For this reason, I recommand to not use aria-level for an heading of level 7 or more. IF you really, really, really need headings level 7 and more, just use <p> or <div> without any indication, so to not disturb screen readers and other assistive tools which don't support headings beyond level 6.

However, before taking this simple solution for granted, please ask yourself:
Do you really need to go that deep ?

You should ask yourself the question, because in fact, probably you don't need to. Many people have difficulties understanding long texts and complicated structures. A normal well structured text with a reasonable length shouldn't need to use more than 3 levels. A technical specification, an user manual or a research paper might need 4, or maybe 5 given its complexity, deepness and length. IN principle, 6 level should thus be more than sufficient to build a correct, meaningful and understandable structure.

If you need more levels, probably that whether you skip levels for no reason, or your text isn't well thought. Can't you organize it differently ? Maybe split it in different parts ?

You are talking about <section> and <article>, but do they really all delimit sections or articles ? Otherwise said, do all of them really have a sectionning role within the whole document, semantically speaking ? I doubt about it. I'm pretty sure that some of them only have a visual separation role only, in which case you should replace them by <div>.

Look at the following question, hwere I gave a similar answer: Is h6 aria-level="7" a reliable way to create a h7 element?

Serena

Thank you for this, especially the specifics about JAWS. I think the structuring we have is correct, but I am curious to hear your analysis. This is for an application that publishes HTML mathematics textbooks. A page might be a "section" (h2) of the textbook [with h1 in the banner for the book title]. Then there may be subsections (h3) and subsubsections (h4). In rare extreme cases, a subsubsection might have an "Exercises" subdivision (h5). In there, you might find an exercise (article h6) with components like a solution (article h7). We are trying to account for these rare extreme cases. – Centerpiece

Perhaps you could adopt a structure where "exercise 1", "solution 1", "exercise 2", "solution 2", ... would all have the same level; or you could squeeze out the H5 "exercises" to directly have H5 "exercise 1", H5 "exercise 2", ... If most subsections often have 3 exercises or less in a row, it won't harm navigation that much. Remember that many levels may also mean more items to expand in a navigation tree. It may be simpler to have more items in a given level rather than more shorter levels, especially at level 4 or below. In short: don't do oversectionning – Serena

"Don't do oversectioning" is a good ideal! In some cases, such as the mathematics textbook, I can see reasonable people disagreeing about whether to prefer heading depth as "more semantically-correct" (in their words) vs. shallow headings as "more comprehensible" (in their words). I am looking at how to support "arbitrarily deep" sections as an edge case when combining documents programmatically. A page full of <h1>'s won't do, but if I increment section heading elements when embedding one document in another, and I don't control the depth of the source docs, then <h6> needs a new home. – Cystocarp

Answer 3

I personally think that anything below <h3> is too small. <h4> is the size of a <p>. If you actually want something smaller, you can set the font-size style property for it. Below is the table for the px sizes of <h1> through <h6>:

H1	H2	H3	H4	H5	H6
32px	24px	18.72px	16px	13.28px	10.72px

So your suggested '<h7>' would be around 8px. For your <div> that you need to make a <h7>, you should give it class="h7" and in your CSS, put:

.h7{font-size:8px}

Of course, you could put whatever size you want. This way, you can make even smaller types, although that may not be a good idea (for text readability).

Uriiah

The hN headings help describe the structure of the document. While there are default sizes for the hN, any good design for a website uses CSS to style every element. So, it doesn't matter the default font size, or the default margins, or other default layout of the elements. The right thing to do is to correctly organize the elements to describe the structure, and once that is done, then design the layout to look good. – Woollen

@DavidFarmer : I am sorry. I thought that by adding a class to signify it as a specific size would describe the structure by making the text smaller each time. If it doesn't, then thank you for letting me know. – Uriiah

@LakshyaRaj Here is one example of how hN has more meaning. The client application might make a "table of contents" for the page. It will organize the TOC according to these hN, putting the h2 at the same depth, then indenting for h3, and so on. If you put styling on an hN to alter the visual appearance, that has no bearing on how the TOC will be constructed. This is just one example; there are more things that hN is used for, and changing their visual styling will not affect these other things. – Centerpiece