Is [h6 aria-level="7"] a reliable way to create a [h7] element?

Question

Typically, HTML headings are only able to go up to <h6> before it becomes invalid. As far as I can tell, the following is a completely valid way to create a <h7> element in HTML:

<h6 aria-level="7">This is a heading level 7 element</h6>

I have tested this in NVDA in Chrome, Firefox and Internet Explorer and it works as intended.

I don't really have access to any other screen readers though. Can someone with access to lots of screen reader / browser combinations confirm whether the above is consistently conveyed to the user as a <h7> element?

If you know of a screen reader / browser combination where this technique definitely doesn’t work, please let me know.

Pun

Answer 1

Although <div role="heading" aria-level="7"> seem to be a valid way to define a H7 element, screen readers don't universally consider it like H1-H6. I can at least confirm that it doesn't work with Jaws. With Jaws it is even worse, it is taken as H2!

Tested with Jaws on firefox, chrome and IE11. Also tested with levels 8, 9, 10, 11 and 12. Specifying aria-level="X" with X>6 invariably turn it into H2.

So, don't use this trick to make a kind of H7 element. It isn't universally supported.

You'd better think again the structure of your page. Do you really need 7 levels of headings? It is often said that a good document shouldn't have more than 3 levels, maybe 4 for a very long or heavy technical document, exceptionally 5. Given the special status of H1, let's add one. So, 6 levels must be more than enough.

Haven't you skipped some of the levels? Skipping heading levels is semantically incorrect, and you shouldn't do it just because of visual appearance.

In fact, the ARIA specification for the heading role never explicitly states that specifying a level above 6 is permitted. The default value for aria-level is 2. This explains the technically legitimate behavior of Jaws while encountering an invalid value for aria-level.

At the same time, the W3C also released this official technique for creating h7 semantics which suggests that the Jaws implementation is not the intended behavior.

Nero

Thank you. This is what I was after when I asked the question. Someone testing a screen-reader and finding that it doesn't work. Though since it is a technically valid option, this is a bug that should be retorted to Jaws. – Pun

The reason for wanting a h7 is mostly for the sake of labelling sectioning elements but there are alternative ways of doing that to avoid having to use a h7. – Pun

this is a bug that should be retorted to Jaws => No, this is not a bug, the interpretation of Jaws is valid according to the ARIA specification. See my updated answer. – Nero

It has officially been documented here by the W3C, therefore bug. w3.org/TR/WCAG20-TECHS/ARIA12.html#ARIA12-ex2 – Pun

Answer 2

Is [h6 aria-level=“7”] a reliable way to create a [h7] element?

No.

This goes against the second rule of ARIA:

Do not change native semantics, unless you really have to.

If you want to define a new heading level, you should use

<div role="heading" aria-level="7">

See WAI ARIA example:

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.

EDIT: Another example in WCAG specs ARIA12: Using role=heading to identify headings (thanks do @Daniel-tonon for pointing this out)

Note that JAWS has bad support any aria-level above 6, no matter if you use h6 or div (see @QuentinC answer)

Tambratamburlaine

By using a <h6> it already has the role="heading" implied. It is more easily identifiable as a heading when looking through the markup to see a <h6> than a <div>. I don't see an issue with simply adjusting the aria-level. "Unless you really have to" if I ran out of headings, then yes, i really have to. – Pun

This isn't actually an answer to the question being asked. – Pun

How is <div role="heading" aria-level="7"> not changing native semantics? <div> natively has no semantics so giving it semantics is inheritly changing its semantics. – Pun

@DanielTonon I answered your question and edited my answer to be more precise. No it's not a reliable way. And yes div has no strong semantics, so it accepts any role. – Tambratamburlaine

Thanks for the link. It at least confirms the main question I was trying to ask in terms of, "is h7 possible". I would prefer to see proof of h6 not working in a screen reader/browser combo before accepting "no" as the answer though. – Pun

@DanielTonon Mainstream screenreaders should work, but it may fail with some accessibility plugins. For instance, pressing "6" for navigating from h6 to h6 might be implemented using a selector like [aria-level=6],h6 – Tambratamburlaine

If something doesn't support <h6 aria-level="7"> then I doubt it supports <div role="heading" aria-level="7">. It's even less likely to support that since if it doesn't account for aria-level, it most likely doesn't account for role="heading" either. At least with a h6 it still reveals itself as a heading in those tools. – Pun

@DanielTonon You should remember that strong semantics has higher priority than anything else, so a selector like [aria-levell=6],h6 is perfect to select level 6 headings, and [aria-level=7] for level 7. using both h6, and aria-level=7, the same heading would appear twice, which is confusing. – Tambratamburlaine

I've decided to accept your answer. I don't necessarily agree with you but you have provided a good answer, linked to good resources and have provided strong arguments. – Pun