问题
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.
回答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 never explicitly state that specifying a level above 6 is permitted. The default value for aria-level is 2. This explains the legitimate behavior of Jaws while encountering an invalid value for aria-level.
回答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)
来源：https://stackoverflow.com/questions/55891025/is-h6-aria-level-7-a-reliable-way-to-create-a-h7-element