Notice: This is a work in progress. Please submit feedback or suggestions.

Test: HTML and ARIA headings test

Current support: supported

This test uses both HTML and ARIA headings

Run this test and and submit your results

On this page

Test HTML

open the test page in a new tab
<!DOCTYPE html>
<html lang="en">
<head>
    <title>headings test</title>
</head>
<body>

<h1>Lorem ipsum (h1)</h1>
<h2>Lorem ipsum (h2)</h2>
<h3>Lorem ipsum (h3)</h3>
<h4>Lorem ipsum (h4)</h4>
<h5>Lorem ipsum (h5)</h5>
<h6>Lorem ipsum (h6)</h6>

<div role="heading" aria-level="1">Lorem ipsum (h1 - aria)</div>
<div role="heading" aria-level="2">Lorem ipsum (h2 - aria)</div>
<div role="heading" aria-level="3">Lorem ipsum (h3 - aria)</div>
<div role="heading" aria-level="4">Lorem ipsum (h4 - aria)</div>
<div role="heading" aria-level="5">Lorem ipsum (h5 - aria)</div>
<div role="heading" aria-level="6">Lorem ipsum (h6 - aria)</div>

</body>
</html>

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
JAWS2019.1906.10Google Chrome7519032019-07-13
JAWS2019.1906.10Internet Explorer1119032019-07-13
JAWS2019.1906.10Firefox (desktop)6819032019-07-13
Narrator1903Microsoft Edge4419032019-07-13
NVDA2019.1.1Google Chrome7519032019-07-13
NVDA2019.1.1Firefox (desktop)6819032019-07-13
TalkBack7.3.0Google Chrome (android)757.02019-07-27
VoiceOver for iOS12.3.1Safari (iOS)12.3.112.3.12019-07-13
VoiceOver for macOS10.14.5Safari (macOS)12.1.110.14.52019-07-13
Orca3.31.4Firefox (desktop)69Ubuntu 19.042019-09-15

Summary of support by expectation and assistive technology

ExpectationDragon Naturally SpeakingJAWSNarratorNVDATalkBackVoiceOver for iOSVoiceOver for macOSOrca
h1, h2, h3, h4, h5, and h6 elements
MUST convey the heading role, level, and namenot applicablesupportedsupportedsupportedsupportedsupportedsupportedsupported
SHOULD provide shortcuts to jump to headingsnot applicablesupportedsupportedsupportedsupportedsupportedsupportedsupported
heading role
MUST convey the heading role and namenot applicablesupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST provide shortcuts to jump to headingsnot applicablesupportedsupportedsupportedsupportedsupportedsupportedsupported
aria-level attribute
MUST convey the presence and value of the aria-level attributenot applicablesupportedsupportedsupportedsupportedsupportedsupportedsupported

* means that some support is hidden behind settings

Detailed support results by expectation

h1, h2, h3, h4, h5, and h6 elements: The screen reader MUST convey the heading role, level, and name

Rationale: The user needs to know that the element describes the following content, the level of the heading in the document outline, and the name of the heading.

Examples of assistive technologies support this expectation:

  • When applied to a heading, the heading might be announced as something like "<name> heading level <level>"

Grading method: Just one of the listed commands must pass for the expectation to pass.

This expectation is from the h1, h2, h3, h4, h5, and h6 elements feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
JAWSInternet Exploreryes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
NarratorMicrosoft Edgeyes
  • Result: (pass)
    • command: Down arrow (Read next item (scan mode))
    • Output: "heading level <level>, <name>"
More information
NVDAGoogle Chromeyes
  • Result: (pass)
    • command: down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
NVDAFirefox (desktop)yes
  • Result: (pass)
    • command: down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
TalkBackGoogle Chrome (android)yes
  • Result: (pass)
    • command: Swipe right (Read next item)
    • Output: "<name>, heading <level>"
More information
VoiceOver for iOSSafari (iOS)yes
  • Result: (pass)
    • command: Swipe Right (Next item)
    • Output: "<name>, heading level <level>"
More information
VoiceOver for macOSSafari (macOS)yes
  • Result: (pass)
    • command: VO + Right arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
OrcaFirefox (desktop)yes
  • Result: (pass)
    • command: down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "<name>, heading level <level>"
More information

Extended Support for: h1, h2, h3, h4, h5, and h6 elements: The screen reader MUST convey the heading role, level, and name

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWSMicrosoft Edgeunknown-More information
NarratorFirefox (desktop)unknown-More information
NarratorGoogle Chromeunknown-More information
NarratorInternet Explorerunknown-More information
NVDAInternet Explorerunknown-More information
NVDAMicrosoft Edgeunknown-More information
TalkBackFirefox (Android)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
OrcaGoogle Chromeunknown-More information
Back to top

h1, h2, h3, h4, h5, and h6 elements: The screen reader SHOULD provide shortcuts to jump to headings

Rationale: Headings provide an outline of the page and users need to be able to quickly navigate to different sections of the page.

Grading method: Just one of the listed commands must pass for the expectation to pass.

This expectation is from the h1, h2, h3, h4, h5, and h6 elements feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Insert + F6 (List headings)
    • Output: all headings included in list along with heading levels
  • Result: (pass)
    • command: h (Next heading)
    • Output: "<name>, heading level <level>"
More information
JAWSInternet Exploreryes
  • Result: (pass)
    • command: Insert + F6 (List headings)
    • Output: all headings included in list along with heading levels
  • Result: (pass)
    • command: h (Next heading)
    • Output: "<name>, heading level <level>"
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Insert + F6 (List headings)
    • Output: all headings included in list along with heading levels
  • Result: (pass)
    • command: h (Next heading)
    • Output: "<name>, heading level <level>"
More information
NarratorMicrosoft Edgeyes
  • Result: (pass)
    • command: Narrator + F6 (List headings)
    • Output: all headings included in list along with heading levels
  • Result: (pass)
    • command: h (Next heading)
    • Output: "<name> heading level <level>"
  • Result: (pass)
    • command: Narrator + right arrow (Read next item (item view, scan mode off))
    • Output: "<name> heading level <level>"
More information
NVDAGoogle Chromeyes
  • Result: (pass)
    • command: NVDA + F7 (List headings)
    • Output: all headings included in a tree list with levels starting at zero. levels in this view are based on the tree, not the role or aria-level.
  • Result: (pass)
    • command: h (Next heading)
    • Output: "<name>, heading level <level>"
More information
NVDAFirefox (desktop)yes
  • Result: (pass)
    • command: NVDA + F7 (List headings)
    • Output: all headings included in a tree list with levels starting at zero. levels in this view are based on the tree, not the role or aria-level.
  • Result: (pass)
    • command: h (Next heading)
    • Output: "<name>, heading level <level>"
More information
TalkBackGoogle Chrome (android)yes
  • Result: (pass)
    • command: Swipe right (next heading (correct item type must be selected))
    • Output: "<name>, heading <level>"
More information
VoiceOver for iOSSafari (iOS)yes
  • Result: (pass)
    • command: Swipe down (Next item (as set by the rotor))
    • Output: "<name>, heading level <level>"
More information
VoiceOver for macOSSafari (macOS)yes
  • Result: (pass)
    • command: VO + U (Open Rotor)
    • Output: all headings included in a tree list with levels starting at zero. levels in this view are based on the tree, not the role or aria-level.
More information
OrcaFirefox (desktop)yes
  • Result: (pass)
    • command: h (Next heading)
    • location before command: before target
    • location after command: target
    • Output: "<name>, heading level <level>"
  • Result: (pass)
    • command: Alt + shift + H (List headings)
    • location before command: within target
    • location after command: end of target
    • Output: all headings and heading levels were listed
More information

Extended Support for: h1, h2, h3, h4, h5, and h6 elements: The screen reader SHOULD provide shortcuts to jump to headings

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWSMicrosoft Edgeunknown-More information
NarratorFirefox (desktop)unknown-More information
NarratorGoogle Chromeunknown-More information
NarratorInternet Explorerunknown-More information
NVDAInternet Explorerunknown-More information
NVDAMicrosoft Edgeunknown-More information
TalkBackFirefox (Android)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
OrcaGoogle Chromeunknown-More information
Back to top

heading role: The screen reader MUST convey the heading role and name

Rationale: The user needs to know that the element describes the following content and the name of the heading.

Examples of assistive technologies support this expectation:

  • When applied to a heading, the heading might be announced as something like "<name> heading level <level>"

Grading method: Just one of the listed commands must pass for the expectation to pass.

This expectation is from the heading role feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
JAWSInternet Exploreryes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
NarratorMicrosoft Edgeyes
  • Result: (pass)
    • command: Down arrow (Read next item (scan mode))
    • Output: "heading level <level>, <name>"
More information
NVDAGoogle Chromeyes
  • Result: (pass)
    • command: down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
NVDAFirefox (desktop)yes
  • Result: (pass)
    • command: down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
TalkBackGoogle Chrome (android)yes
  • Result: (pass)
    • command: Swipe right (Read next item)
    • Output: "<name>, heading <level>"
More information
VoiceOver for iOSSafari (iOS)yes
  • Result: (pass)
    • command: Swipe Right (Next item)
    • Output: "<name>, heading level <level>"
More information
VoiceOver for macOSSafari (macOS)yes
  • Result: (pass)
    • command: VO + Right arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
OrcaFirefox (desktop)yes
  • Result: (pass)
    • command: down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "<name>, heading level <level>"
More information

Extended Support for: heading role: The screen reader MUST convey the heading role and name

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWSMicrosoft Edgeunknown-More information
NarratorFirefox (desktop)unknown-More information
NarratorGoogle Chromeunknown-More information
NarratorInternet Explorerunknown-More information
NVDAInternet Explorerunknown-More information
NVDAMicrosoft Edgeunknown-More information
TalkBackFirefox (Android)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
OrcaGoogle Chromeunknown-More information
Back to top

heading role: The screen reader MUST provide shortcuts to jump to headings

Rationale: Headings provide an outline of the page and users need to be able to quickly navigate to different sections of the page.

Grading method: Just one of the listed commands must pass for the expectation to pass.

This expectation is from the heading role feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Insert + F6 (List headings)
    • Output: all headings included in list along with heading levels
  • Result: (pass)
    • command: h (Next heading)
    • Output: "<name>, heading level <level>"
More information
JAWSInternet Exploreryes
  • Result: (pass)
    • command: Insert + F6 (List headings)
    • Output: all headings included in list along with heading levels
  • Result: (pass)
    • command: h (Next heading)
    • Output: "<name>, heading level <level>"
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Insert + F6 (List headings)
    • Output: all headings included in list along with heading levels
  • Result: (pass)
    • command: h (Next heading)
    • Output: "<name>, heading level <level>"
More information
NarratorMicrosoft Edgeyes
  • Result: (pass)
    • command: Narrator + F6 (List headings)
    • Output: all headings included in list along with heading levels
  • Result: (pass)
    • command: h (Next heading)
    • Output: "<name> heading level <level>"
  • Result: (pass)
    • command: Narrator + right arrow (Read next item (item view, scan mode off))
    • Output: "<name> heading level <level>"
More information
NVDAGoogle Chromeyes
  • Result: (pass)
    • command: NVDA + F7 (List headings)
    • Output: all headings included in a tree list with levels starting at zero. levels in this view are based on the tree, not the role or aria-level.
  • Result: (pass)
    • command: h (Next heading)
    • Output: "<name>, heading level <level>"
More information
NVDAFirefox (desktop)yes
  • Result: (pass)
    • command: NVDA + F7 (List headings)
    • Output: all headings included in a tree list with levels starting at zero. levels in this view are based on the tree, not the role or aria-level.
  • Result: (pass)
    • command: h (Next heading)
    • Output: "<name>, heading level <level>"
More information
TalkBackGoogle Chrome (android)yes
  • Result: (pass)
    • command: Swipe right (next heading (correct item type must be selected))
    • Output: "<name>, heading <level>"
More information
VoiceOver for iOSSafari (iOS)yes
  • Result: (pass)
    • command: Swipe down (Next item (as set by the rotor))
    • Output: "<name>, heading level <level>"
More information
VoiceOver for macOSSafari (macOS)yes
  • Result: (pass)
    • command: VO + U (Open Rotor)
    • Output: all headings included in a tree list with levels starting at zero. levels in this view are based on the tree, not the role or aria-level.
More information
OrcaFirefox (desktop)yes
  • Result: (pass)
    • command: h (Next heading)
    • location before command: before target
    • location after command: target
    • Output: "<name>, heading level <level>"
  • Result: (pass)
    • command: Alt + shift + H (List headings)
    • location before command: within target
    • location after command: end of target
    • Output: all headings and heading levels were listed
More information

Extended Support for: heading role: The screen reader MUST provide shortcuts to jump to headings

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWSMicrosoft Edgeunknown-More information
NarratorFirefox (desktop)unknown-More information
NarratorGoogle Chromeunknown-More information
NarratorInternet Explorerunknown-More information
NVDAInternet Explorerunknown-More information
NVDAMicrosoft Edgeunknown-More information
TalkBackFirefox (Android)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
OrcaGoogle Chromeunknown-More information
Back to top

aria-level attribute: The screen reader MUST convey the presence and value of the aria-level attribute

Rationale: The user needs to know that the element has a level and the value of that level.

Examples of assistive technologies support this expectation:

  • When applied to a heading, the heading might be announced as something like "<name> heading level <level>"

Grading method: Just one of the listed commands must pass for the expectation to pass.

This expectation is from the aria-level attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
JAWSInternet Exploreryes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
NarratorMicrosoft Edgeyes
  • Result: (pass)
    • command: Down arrow (Read next item (scan mode))
    • Output: "heading level <level>, <name>"
More information
NVDAGoogle Chromeyes
  • Result: (pass)
    • command: down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
NVDAFirefox (desktop)yes
  • Result: (pass)
    • command: down arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
TalkBackGoogle Chrome (android)yes
  • Result: (pass)
    • command: Swipe right (Read next item)
    • Output: "<name>, heading <level>"
More information
VoiceOver for iOSSafari (iOS)yes
  • Result: (pass)
    • command: Swipe Right (Next item)
    • Output: "<name>, heading level <level>"
More information
VoiceOver for macOSSafari (macOS)yes
  • Result: (pass)
    • command: VO + Right arrow (Read next item)
    • Output: "heading level <level>, <name>"
More information
OrcaFirefox (desktop)yes
  • Result: (pass)
    • command: down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "<name>, heading level <level>"
More information

Extended Support for: aria-level attribute: The screen reader MUST convey the presence and value of the aria-level attribute

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWSMicrosoft Edgeunknown-More information
NarratorFirefox (desktop)unknown-More information
NarratorGoogle Chromeunknown-More information
NarratorInternet Explorerunknown-More information
NVDAInternet Explorerunknown-More information
NVDAMicrosoft Edgeunknown-More information
TalkBackFirefox (Android)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
OrcaGoogle Chromeunknown-More information
Back to top

History

  • 2019-07-12 Test created
  • 2019-07-27 Talkback results added
  • 2019-09-15 Add orca results