htmlaccessibilitywai-ariahtml-heading

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

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.

Solution

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