The 7th heading
You may think there are only 6 of them. And you are right, but there's a little trick for you, if you run out of headings.
As we all may know, we have 6 levels of native HTML header tags.
All you need to know about these 6:
- You should only have one
- Make sure they are in ascending order.
- Avoid skipping heading levels.
There is one more thing: Don't use heading level for styling
I can hardly imagine a situation where this isn't enough for me, but if we have to work with an extremely complex document, there's a solution for adding more heading levels.
<h1>Heading lvl 1</h1> <h2>Heading lvl 2</h2> <h3>Heading lvl 3</h3> <h4>Heading lvl 4</h4> <h5>Heading lvl 5</h5> <h6>Heading lvl 6</h6> <div role="heading" aria-level="7"> This is the 7th heading. </div>
As you can see in the above example I used 2 WAI-ARIA attributes: role and aria-level.
The role="heading" attribute indicates to screen readers and other assistive technologies that this element should be treated like other html heading elements.
The aria-level attribute tells the heading level.
You can use these attributes on
You should use native HTML tags for the first 6 levels of headings in the correct order.
If you need a 7th heading level, please consider to restructure you document.
If this isn't possible, use the mentioned attributes.
You can read more about these attributes here:
- ARIA: heading role - Accessibility | MDN
- WAI-ARIA: aria-level (Property) • Digital A11Y
- Accessible Rich Internet Applications (WAI-ARIA) 1.1