1

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.

unor
  • 92,415
  • 26
  • 211
  • 360
Daniel Tonon
  • 9,261
  • 5
  • 61
  • 64

2 Answers2

4

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.

QuentinC
  • 12,311
  • 4
  • 24
  • 37
  • 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. – Daniel Tonon May 09 '19 at 21:49
  • 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`. – Daniel Tonon May 09 '19 at 21:57
  • 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. – QuentinC May 10 '19 at 03:38
  • 2
    It has officially been documented here by the W3C, therefore bug. https://www.w3.org/TR/WCAG20-TECHS/ARIA12.html#ARIA12-ex2 – Daniel Tonon May 10 '19 at 03:41
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)

Adam
  • 17,838
  • 32
  • 54
  • 1
    By using a `
    ` it already has the `role="heading"` implied. It is more easily identifiable as a heading when looking through the markup to see a `
    ` than a `
    `. 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.
     – Daniel Tonon Apr 28 '19 at 22:34
  • This isn't actually an answer to the question being asked. – Daniel Tonon Apr 28 '19 at 22:37
  • 2
    How is `
    ` not changing native semantics? `
    ` natively has no semantics so giving it semantics is inheritly changing its semantics.
     – Daniel Tonon Apr 28 '19 at 22:41
  • @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. – Adam Apr 29 '19 at 09:37
  • 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. – Daniel Tonon Apr 29 '19 at 10:13
  • @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` – Adam Apr 29 '19 at 12:16
  • If something doesn't support `
    ` then I doubt it supports `
    `. 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.
     – Daniel Tonon Apr 29 '19 at 21:55
  • @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. – Adam Apr 30 '19 at 06:13
  • 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. – Daniel Tonon May 01 '19 at 10:38