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

Test: aria-details test

Current support: partial (3/9)

A sample of aria-details functionality

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>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>

Support tables

Expectations are conditions that must be met for the feature to be considered as "supported". Only "MUST" expectations need to be met for minimal "support". "SHOULD" and "MAY" expectations indicates support that goes above and beyond. Note that there is not an explicit standard that dictates these expectations, and as such, they are likely opinionated. As such, a feature might not meet all "MUST" expectations but still be usable (potentially frustratingly so). Additionally, the assistive technology may provide many different commands to read, navigate, or otherwise interact with a feature. Only one command is required to pass for the expectation to be minimally supported.

Summary of support by expectation type

MUSTSHOULDMAY
partial (3/9)nonepartial (3/9)

Summary of support by expectation and assistive technology

ExpectationDragon Naturally SpeakingJAWSNarratorNVDATalkBackVoiceOver for iOSVoiceOver for macOS
aria-details attribute
MUST convey the presence of aria-detailsnot applicablesupportednonenonenonenonenone
SHOULD allow the user to jump to the referenced elementnot applicablenonenonenonenonenonenone
SHOULD allow the user to jump back to the referencing elementnot applicablenonenonenonenonenonenone
MAY convey the boundaries of the detailsnot applicablesupportednonenonenonenonenone

* means that some support is hidden behind settings

Detailed support results by expectation

aria-details attribute: The screen reader MUST convey the presence of aria-details

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
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
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: The screen reader MUST 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
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
Back to top

aria-details attribute: The screen reader SHOULD 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.

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
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
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: The screen reader SHOULD 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
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
Back to top

aria-details attribute: The screen reader SHOULD 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.

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
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
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: The screen reader SHOULD 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
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
Back to top

aria-details attribute: The screen reader MAY convey the boundaries of the details

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

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
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
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: The screen reader MAY 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
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
Back to top

Dates and Versions

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
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

History

  • 2019-05-19 Test created