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

Test: aria-details test

Screen Reader support level: partial (3/10)

Voice Control support level: not applicable

A sample of aria-details functionality

Run this test and and submit your results

On this page

Test HTML

open the test page
<!DOCTYPE html>
<html lang="en">
<head>
    <title>aria-details examples</title>
</head>
<body>
<h1>aria-details examples</h1>

<img src="pythagorean.jpg" alt="Pythagorean Theorem" aria-details="details">

<p>Some unrelated text</p>

<p id="details">Details about the Pythagorean Theorem image</p>

<p>Further text</p>

</body>
</html>

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
JAWS2018.1811.2Google Chrome7418092019-05-19
JAWS2018.1811.2Internet Explorer11.13418092019-05-19
JAWS2018.1811.2Firefox (desktop)6618092019-05-19
Narrator1809Microsoft Edge44.1776318092019-05-19
NVDA2018.1808.10Google Chrome7418092019-05-19
NVDA2018.3.2Firefox (desktop)6618092019-05-19
Orca3.31.4Firefox (desktop)69Ubuntu 19.042019-09-16
TalkBack8.0.0Google Chrome (android)758.0.02019-07-01
VoiceOver for iOS12.2Safari (iOS)12.212.22019-05-19
VoiceOver for macOS10.14.4Safari (macOS)12.110.14.42019-05-19

Summary of Screen Reader support by expectation

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver for iOSVoiceOver for macOS
aria-details attribute
MUST convey the presence of aria-detailssupportednonenonenonenonenonenone
SHOULD allow the user to jump to the referenced elementnonenonenonenonenonenonenone
SHOULD allow the user to jump back to the referencing elementnonenonenonenonenonenonenone
MAY convey the boundaries of the detailssupportednonenonenonenonenonenone

* means that some support is hidden behind settings

Summary of Voice Control support by expectation

ExpectationDragon Naturally SpeakingVoice Access for AndroidVoice Control for iOSVoice Control for MacOS
Not applicable

* means that some support is hidden behind settings

Detailed support results by expectation

Expectation for the aria-details attribute: convey the presence of aria-details

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

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

This expectation is from the aria-details attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "Graphic, unavailable, Pythagorean Theorem, has details."
More information
JAWSInternet Exploreryes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "Graphic, unavailable, Pythagorean Theorem, has details."
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "Pythagorean Theorem, has details."
More information
NarratorMicrosoft Edgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • Output: "Image, Pythagorean Theorem"
More information
NVDAGoogle Chromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: "Graphic, Pythagorean Theorem"
More information
NVDAFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: "Pythagorean Theorem"
More information
OrcaFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: "Pythagorean Theorem"
More information
TalkBackGoogle Chrome (android)none
  • Result: (fail)
    • command: Swipe right (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Pythagorean Theorem, graphic"
More information
Voice Access for AndroidGoogle Chrome (android)not applicable-More information
Voice Control for iOSSafari (iOS)not applicable-More information
Voice Control for MacOSSafari (macOS)not applicable-More information
VoiceOver for iOSSafari (iOS)none
  • Result: (fail)
    • command: Swipe Right (Next item)
    • Output: "Pythagorean Theorem, image"
More information
VoiceOver for macOSSafari (macOS)none
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • Output: "Pythagorean Theorem, image"
More information

Extended Support for: aria-details attribute: convey the presence of aria-details

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
Voice Access for AndroidFirefox (Android)not applicable-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
Voice Control for MacOSGoogle Chromenot applicable-More information
Voice Control for MacOSFirefox (desktop)not applicable-More information
Back to top

Expectation for the aria-details attribute: allow the user to jump to the referenced element

Rationale: If the details are not adjacent to the element with aria-details, they might find it helpful to jump directly to the details.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: NA

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

This expectation is from the aria-details attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromenone
  • Result: (fail)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • Output: (does not let user navigate to the referenced element)
More information
JAWSInternet Explorernone
  • Result: (fail)
    • command: Down arrow (Read next item)
    • Output: (does not let user navigate to the referenced element)
More information
JAWSFirefox (desktop)none
  • Result: (fail)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • Output: (does not let user navigate to the referenced element)
More information
NarratorMicrosoft Edgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • Output: (does not let user navigate to the referenced element)
More information
NVDAGoogle Chromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not let user navigate to the referenced element)
More information
NVDAFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not let user navigate to the referenced element)
More information
OrcaFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not let user navigate to the referenced element)
More information
TalkBackGoogle Chrome (android)none
  • Result: (fail)
    • command: Swipe right (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Pythagorean Theorem, graphic"
More information
Voice Access for AndroidGoogle Chrome (android)not applicable-More information
Voice Control for iOSSafari (iOS)not applicable-More information
Voice Control for MacOSSafari (macOS)not applicable-More information
VoiceOver for iOSSafari (iOS)none
  • Result: (fail)
    • command: Swipe Right (Next item)
    • Output: (does not let user navigate to the referenced element)
More information
VoiceOver for macOSSafari (macOS)none
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • Output: (does not let user navigate to the referenced element)
More information

Extended Support for: aria-details attribute: allow the user to jump to the referenced element

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
Voice Access for AndroidFirefox (Android)not applicable-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
Voice Control for MacOSGoogle Chromenot applicable-More information
Voice Control for MacOSFirefox (desktop)not applicable-More information
Back to top

Expectation for the aria-details attribute: allow the user to jump back to the referencing element

Rationale: If the details are not adjacent to the element with aria-details, they might find it helpful to jump back so that they can continue reading the page.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: NA

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

This expectation is from the aria-details attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromenone
  • Result: (fail)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • Output: (does not let user navigate to the referenced element)
More information
JAWSInternet Explorernone
  • Result: (fail)
    • command: Down arrow (Read next item)
    • Output: (does not let user navigate to the referenced element)
More information
JAWSFirefox (desktop)none
  • Result: (fail)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • Output: (does not let user navigate to the referenced element)
More information
NarratorMicrosoft Edgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • Output: (does not let user navigate to the referenced element)
More information
NVDAGoogle Chromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not let user navigate to the referenced element)
More information
NVDAFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not let user navigate to the referenced element)
More information
OrcaFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not let user navigate to the referenced element)
More information
TalkBackGoogle Chrome (android)none
  • Result: (fail)
    • command: Swipe right (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Pythagorean Theorem, graphic"
More information
Voice Access for AndroidGoogle Chrome (android)not applicable-More information
Voice Control for iOSSafari (iOS)not applicable-More information
Voice Control for MacOSSafari (macOS)not applicable-More information
VoiceOver for iOSSafari (iOS)none
  • Result: (fail)
    • command: Swipe Right (Next item)
    • Output: (does not let user navigate to the referenced element)
More information
VoiceOver for macOSSafari (macOS)none
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • Output: (does not let user navigate to the referenced element)
More information

Extended Support for: aria-details attribute: allow the user to jump back to the referencing element

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
Voice Access for AndroidFirefox (Android)not applicable-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
Voice Control for MacOSGoogle Chromenot applicable-More information
Voice Control for MacOSFirefox (desktop)not applicable-More information
Back to top

Expectation for the aria-details attribute: convey the boundaries of the details

Rationale: A screen reader user may find it helpful to know exactly where the details start and end.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MAY
  • Voice Control: NA

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

This expectation is from the aria-details attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "Entering details"
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "Leaving"
More information
JAWSInternet Exploreryes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "Entering details"
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "Leaving"
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "Entering details"
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "Leaving"
More information
NarratorMicrosoft Edgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • Output: (does not convey boundaries)
More information
NVDAGoogle Chromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not convey boundaries)
More information
NVDAFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not convey boundaries)
More information
OrcaFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not convey boundaries)
More information
TalkBackGoogle Chrome (android)none
  • Result: (fail)
    • command: Swipe right (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Details about the Pythagorean Theorem image" (i.e. TalkBack read the text content itself)
More information
Voice Access for AndroidGoogle Chrome (android)not applicable-More information
Voice Control for iOSSafari (iOS)not applicable-More information
Voice Control for MacOSSafari (macOS)not applicable-More information
VoiceOver for iOSSafari (iOS)none
  • Result: (fail)
    • command: Swipe Right (Next item)
    • Output: (does not convey boundaries)
More information
VoiceOver for macOSSafari (macOS)none
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • Output: (does not convey boundaries)
More information

Extended Support for: aria-details attribute: convey the boundaries of the details

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
Voice Access for AndroidFirefox (Android)not applicable-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
Voice Control for MacOSGoogle Chromenot applicable-More information
Voice Control for MacOSFirefox (desktop)not applicable-More information
Back to top

History

  • 2019-05-19 Test created
  • 2019-09-16 Added orca results