ARIA Heading Level Test
That was an <h1>
, no ARIA. From here it's going to get a bit weird. Validator. Used in my post Level-Setting Heading Levels.
- A:
role="heading"
, no aria-level
-
- Firefox: 2
- NVDA: 2
- Orca: 2
- Narrator: 2
- TalkBack: 2
- Chrome: 2
- JAWS: 2
- NVDA: 2
- TalkBack: 2
- Edge: 2
- Narrator: 2
- Safari: no level
- VoiceOver / macOS: no level
- VoiceOver: no level
- B:
role="heading"
, aria-level="1"
-
- Firefox: 1
- NVDA: 1
- Orca: 1
- Narrator: 1
- TalkBack: 1
- Chrome: 1
- JAWS: 1
- NVDA: 1
- TalkBack: 1
- Edge: 1
- Narrator: 1
- Safari: 1
- VoiceOver / macOS: 1
- VoiceOver: 1
- C:
role="heading"
, aria-level="2"
-
- Firefox: 2
- NVDA: 2
- Orca: 2
- Narrator: 2
- TalkBack: 2
- Chrome: 2
- JAWS: 2
- NVDA: 2
- TalkBack: 2
- Edge: 2
- Narrator: 2
- Safari: 2
- VoiceOver / macOS: 2
- VoiceOver: 2
- D:
role="heading"
, aria-level="3"
-
- Firefox: 3
- NVDA: 3
- Orca: 3
- Narrator: 3
- TalkBack: 3
- Chrome: 3
- JAWS: 3
- NVDA: 3
- TalkBack: 3
- Edge: 3
- Narrator: 3
- Safari: 3
- VoiceOver / macOS: 3
- VoiceOver: 3
- E:
role="heading"
, aria-level="4"
-
- Firefox: 4
- NVDA: 4
- Orca: 4
- Narrator: 4
- TalkBack: 4
- Chrome: 4
- JAWS: 4
- NVDA: 4
- TalkBack: 4
- Edge: 4
- Narrator: 4
- Safari: 4
- VoiceOver / macOS: 4
- VoiceOver: 4
- F:
role="heading"
, aria-level="5"
-
- Firefox: 5
- NVDA: 5
- Orca: 5
- Narrator: 5
- TalkBack: 5
- Chrome: 5
- JAWS: 5
- NVDA: 5
- TalkBack: 5
- Edge: 5
- Narrator: 5
- Safari: 5
- VoiceOver / macOS: 5
- VoiceOver: 5
- G:
role="heading"
, aria-level="6"
-
- Firefox: 6
- NVDA: 6
- Orca: 6
- Narrator: 6
- TalkBack: 6
- Chrome: 6
- JAWS: 6
- NVDA: 6
- TalkBack: 6
- Edge: 6
- Narrator: 6
- Safari: 6
- VoiceOver / macOS: 6
- VoiceOver: 6
- H:
role="heading"
, aria-level="7"
-
- Firefox: 7
- NVDA: 7
- Orca: 7
- Narrator: 7
- TalkBack: no level
- Chrome: 7
- JAWS: 2
- NVDA: 7
- TalkBack: no level
- Edge: 7
- Narrator: 7
- Safari: 7
- VoiceOver / macOS: 7
- VoiceOver: 7
- I:
role="heading"
, aria-level="8"
-
- Firefox: 8
- NVDA: 8
- Orca: 8
- Narrator: 8
- TalkBack: no level
- Chrome: 8
- JAWS: 2
- NVDA: 8
- TalkBack: no level
- Edge: 8
- Narrator: 8
- Safari: 8
- VoiceOver / macOS: 8
- VoiceOver: 8
- J:
role="heading"
, aria-level="9"
-
- Firefox: 9
- NVDA: 9
- Orca: 9
- Narrator: 9
- TalkBack: no level
- Chrome: 9
- JAWS: 2
- NVDA: 9
- TalkBack: no level
- Edge: 9
- Narrator: 9
- Safari: 9
- VoiceOver / macOS: 9
- VoiceOver: 9
- K:
role="heading"
, aria-level="10"
-
- Firefox: 10
- NVDA: 10
- Orca: 10
- Narrator: not recognized as heading
- TalkBack: no level
- Chrome: 2
- JAWS: 2
- NVDA: 2
- TalkBack: 2
- Edge: 2
- Narrator: 2
- Safari: 10
- VoiceOver / macOS: 10
- VoiceOver: 10
- L:
role="heading"
, aria-level="20"
-
- Firefox: 20
- NVDA: 20
- Orca: 20
- Narrator: not recognized as heading
- TalkBack: no level
- Chrome: 2
- JAWS: 2
- NVDA: 2
- TalkBack: 2
- Edge: 2
- Narrator: 2
- Safari: 20
- VoiceOver / macOS: 20
- VoiceOver: 20
- M:
<h6>
, aria-level="7"
-
- Firefox: 7
- NVDA: 7
- Orca: 7
- Narrator: 7
- TalkBack: no level
- Chrome: 7
- JAWS: 2
- NVDA: 7
- TalkBack: no level
- Edge: 7
- Narrator: 7
- Safari: 7
- VoiceOver / macOS: 7
- VoiceOver: 7
- N:
<h6>
, aria-level="30"
-
- Firefox: 30
- NVDA: 30
- Orca: 30
- Narrator: not recognized as heading
- TalkBack: no level
- Chrome: 6
- JAWS: 6
- NVDA: 6
- TalkBack: 6
- Edge: 6
- Narrator: 6
- Safari: 30
- VoiceOver / macOS: 30
- VoiceOver: 30
- O:
<h6>
, aria-level="0"
-
- Firefox: 6
- NVDA: 6
- Orca: 6
- Narrator: announces O, P, Q as one heading at 6
- TalkBack: 6
- Chrome: 6
- JAWS: 6
- NVDA: 6
- TalkBack: 6
- Edge: 6
- Narrator: 6
- Safari: 6
- VoiceOver / macOS: 6
- VoiceOver: 6
- P:
<h6>
, aria-level="-1"
-
- Firefox: 6
- NVDA: 6
- Orca: 6
- Narrator: announces O, P, Q as one heading at 6
- TalkBack: 6
- Chrome: 6
- JAWS: 6
- NVDA: 6
- TalkBack: 6
- Edge: 6
- Narrator: 6
- Safari: 4294967295
- VoiceOver / macOS: 6
- VoiceOver: 6
- Q:
<h6>
, aria-level="hammer"
-
- Firefox: 6
- NVDA: 6
- Orca: 6
- Narrator: announces O, P, Q as one heading at 6
- TalkBack: 6
- Chrome: 6
- JAWS: 6
- NVDA: 6
- TalkBack: 6
- Edge: 6
- Narrator: 6
- Safari: 6
- VoiceOver / macOS: 6
- VoiceOver: 6
- R:
role="heading"
, aria-level="0"
-
- Firefox: 2
- NVDA: 2
- Orca: 2
- Narrator: announces R, S, T as one heading at 2
- TalkBack: 2
- Chrome: 2
- JAWS: 2
- NVDA: 2
- TalkBack: 2
- Edge: 2
- Narrator: 2
- Safari: no level
- VoiceOver / macOS: no level
- VoiceOver: no level
- S:
role="heading"
, aria-level="-1"
-
- Firefox: 2
- NVDA: 2
- Orca: 2
- Narrator: announces R, S, T as one heading at 2
- TalkBack: 2
- Chrome: 2
- JAWS: 2
- NVDA: 2
- TalkBack: 2
- Edge: 2
- Narrator: 2
- Safari: 4294967295
- VoiceOver / macOS: no level
- VoiceOver: no level
- T:
role="heading"
, aria-level="hammer"
-
- Firefox: 2
- NVDA: 2
- Orca: 2
- Narrator: announces R, S, T as one heading at 2
- TalkBack: 2
- Chrome: 2
- JAWS: 2
- NVDA: 2
- TalkBack: 2
- Edge: 2
- Narrator: 2
- Safari: no level
- VoiceOver / macOS: no level
- VoiceOver: no level
- U:
role="heading"
, aria-level="2147483647"
(231−1)
-
- Firefox: 2147483647
- NVDA: 2147483647
- Orca: 2147483647
- Narrator: not recognized as heading
- TalkBack: no level
- Chrome: 2
- JAWS: 2
- NVDA: 2
- TalkBack: 2
- Edge: 2
- Narrator: 2
- Safari: 2147483647
- VoiceOver / macOS: 2147483647
- VoiceOver: 2147483647
- V:
role="heading"
, aria-level="2147483648"
(231)
-
- Firefox: 2
- NVDA: 2
- Orca: 2
- Narrator: 2
- TalkBack: 2
- Chrome: 2
- JAWS: 2
- NVDA: 2
- TalkBack: 2
- Edge: 2
- Narrator: 2
- Safari: no level
- VoiceOver / macOS: no level
- VoiceOver: no level
- W:
<h6>
, aria-level="2147483648"
(231)
-
- Firefox: 6
- NVDA: 6
- Orca: 6
- Narrator: 6
- TalkBack: 6
- Chrome: 6
- JAWS: 6
- NVDA: 6
- TalkBack: 6
- Edge: 6
- Narrator: 6
- Safari: 6
- VoiceOver / macOS: 6
- VoiceOver: 6
Aggregated Results
- Browsers overall handle headings through level 9.
- Firefox and Safari/macOS support heading levels up to 231−1.
- Chrome only supports up to 9, falling back to 2 for all values greater than 9.
- Edge only supports up to 9, falling back to 2 for all values greater than 9.
- Safari/macOS does not like a
-1
value, but it seems to have no impact on a user.
- NVDA and Orca take their values from the browser.
- JAWS takes (or matches) its values from the browser until those values are greater than 6, falling back to 2.
- Narrator treats any headings (via HTML or ARIA) with a level greater than 9 as no longer a heaing.
- Narrator treats level 0 and following non-numeric headings as a single heading at level 2.
- TalkBack does not like levels above 6, announcing no level with Firefox and leaning on Chrome's bug to announce 2.
- VoiceOver is pleasantly consistent between macOS and iPadOS.
- Bugs and VoiceOver aside, invalid level values make the browser fall back to level 2 on an element roled up to a heading (VoiceOver/macOS announces no level) or the heading level of a heading element.
Test A
Test B
Test C
Test D
Test E
Test F
Test G
Test H
Test I
Test J
Test K
Test L
Test M
Test N
Test O
Test P
Test Q
Test R
Test S
Test T
Test U
Test V
Test W