CODEWITHSUNDEEP
htmlaccessibilityhtml-heading
alex.jordan
alex.jordan

Reputation: 368

Best practice for HTML headings when section nesting is 7 deep

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?

Upvotes: 5

Views: 1046

Answers (3)

QuentinC
QuentinC

Reputation: 14687

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?

Upvotes: 2

Daniel Gimenez
Daniel Gimenez

Reputation: 20494

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.

Upvotes: 5

Lakshya Raj
Lakshya Raj

Reputation: 1775

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).

Upvotes: -1

Related Questions