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.2Chrome7418092019-05-19
JAWS2018.1811.2IE11.13418092019-05-19
JAWS2018.1811.2Firefox6618092019-05-19
Narrator1809Edge44.1776318092019-05-19
NVDA2018.1808.10Chrome7418092019-05-19
NVDA2018.3.2Firefox6618092019-05-19
Orca3.31.4Firefox69Ubuntu 19.042019-09-16
TalkBack8.0.0Chrome758.0.02019-07-01
VoiceOver (iOS)12.2Safari12.212.22019-05-19
VoiceOver (macOS)10.14.4Safari12.110.14.42019-05-19

Summary of Screen Reader support by expectation

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
aria-details attribute
SHOULD allow the user to jump back to the referencing elementnonenonenonenonenonenonenone
SHOULD allow the user to jump to the referenced elementnonenonenonenonenonenonenone
MAY convey the boundaries of the detailssupportednonenonenonenonenonenone
MUST convey the presence of aria-detailssupportednonenonenonenonenonenone

* means that some support is hidden behind settings

Summary of Voice Control support by expectation

ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
Not applicable

* means that some support is hidden behind settings

Detailed support results by expectation

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 SpeakingChromenot applicable-More information
JAWSChromenone
  • Result: (fail)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not let user navigate to the referenced element)
More information
JAWSIEnone
  • Result: (fail)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Graphic, unavailable, Pythagorean Theorem, has details."
More information
JAWSFirefoxnone
  • Result: (fail)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not let user navigate to the referenced element)
More information
NarratorEdgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Image, Pythagorean Theorem"
More information
NVDAChromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Graphic, Pythagorean Theorem"
More information
NVDAFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem"
More information
OrcaFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem"
More information
TalkBackChromenone
  • Result: (fail)
    • command: Swipe right (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem, graphic"
More information
Voice Access (Android)Chromenot applicable-More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinot applicable-More information
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • command: Swipe Right (Next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem, image"
More information
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem, image"
More information
Windows Speech RecognitionChromenot applicable-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 SpeakingIEnot applicable-More information
Dragon Naturally SpeakingFirefoxnot applicable-More information
JAWSEdgeunknown-More information
NarratorFirefoxunknown-More information
NarratorChromeunknown-More information
NarratorIEunknown-More information
NVDAIEunknown-More information
NVDAEdgeunknown-More information
TalkBackFirefoxunknown-More information
Voice Access (Android)Firefoxnot applicable-More information
VoiceOver (iOS)Chromeunknown-More information
VoiceOver (macOS)Chromeunknown-More information
VoiceOver (macOS)Firefoxunknown-More information
OrcaChromeunknown-More information
Voice Control (MacOS)Chromenot applicable-More information
Voice Control (MacOS)Firefoxnot applicable-More information
Windows Speech RecognitionEdgenot 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 SpeakingChromenot applicable-More information
JAWSChromenone
  • Result: (fail)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not let user navigate to the referenced element)
More information
JAWSIEnone
  • Result: (fail)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Graphic, unavailable, Pythagorean Theorem, has details."
More information
JAWSFirefoxnone
  • Result: (fail)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not let user navigate to the referenced element)
More information
NarratorEdgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Image, Pythagorean Theorem"
More information
NVDAChromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Graphic, Pythagorean Theorem"
More information
NVDAFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem"
More information
OrcaFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem"
More information
TalkBackChromenone
  • Result: (fail)
    • command: Swipe right (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem, graphic"
More information
Voice Access (Android)Chromenot applicable-More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinot applicable-More information
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • command: Swipe Right (Next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem, image"
More information
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem, image"
More information
Windows Speech RecognitionChromenot applicable-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 SpeakingIEnot applicable-More information
Dragon Naturally SpeakingFirefoxnot applicable-More information
JAWSEdgeunknown-More information
NarratorFirefoxunknown-More information
NarratorChromeunknown-More information
NarratorIEunknown-More information
NVDAIEunknown-More information
NVDAEdgeunknown-More information
TalkBackFirefoxunknown-More information
Voice Access (Android)Firefoxnot applicable-More information
VoiceOver (iOS)Chromeunknown-More information
VoiceOver (macOS)Chromeunknown-More information
VoiceOver (macOS)Firefoxunknown-More information
OrcaChromeunknown-More information
Voice Control (MacOS)Chromenot applicable-More information
Voice Control (MacOS)Firefoxnot applicable-More information
Windows Speech RecognitionEdgenot 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 SpeakingChromenot applicable-More information
JAWSChromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Entering details"
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Entering details"
More information
JAWSIEyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Entering details"
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Entering details"
More information
JAWSFirefoxyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Entering details"
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Entering details"
More information
NarratorEdgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey boundaries)
More information
NVDAChromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey boundaries)
More information
NVDAFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey boundaries)
More information
OrcaFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey boundaries)
More information
TalkBackChromenone
  • Result: (fail)
    • command: Swipe right (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: 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 (Android)Chromenot applicable-More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinot applicable-More information
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • command: Swipe Right (Next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey boundaries)
More information
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey boundaries)
More information
Windows Speech RecognitionChromenot applicable-More information

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

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingIEnot applicable-More information
Dragon Naturally SpeakingFirefoxnot applicable-More information
JAWSEdgeunknown-More information
NarratorFirefoxunknown-More information
NarratorChromeunknown-More information
NarratorIEunknown-More information
NVDAIEunknown-More information
NVDAEdgeunknown-More information
TalkBackFirefoxunknown-More information
Voice Access (Android)Firefoxnot applicable-More information
VoiceOver (iOS)Chromeunknown-More information
VoiceOver (macOS)Chromeunknown-More information
VoiceOver (macOS)Firefoxunknown-More information
OrcaChromeunknown-More information
Voice Control (MacOS)Chromenot applicable-More information
Voice Control (MacOS)Firefoxnot applicable-More information
Windows Speech RecognitionEdgenot applicable-More information
Back to top

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 SpeakingChromenot applicable-More information
JAWSChromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Graphic, unavailable, Pythagorean Theorem, has details."
More information
JAWSIEyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Graphic, unavailable, Pythagorean Theorem, has details."
More information
JAWSFirefoxyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem, has details."
More information
NarratorEdgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Image, Pythagorean Theorem"
More information
NVDAChromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Graphic, Pythagorean Theorem"
More information
NVDAFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem"
More information
OrcaFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem"
More information
TalkBackChromenone
  • Result: (fail)
    • command: Swipe right (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem, graphic"
More information
Voice Access (Android)Chromenot applicable-More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinot applicable-More information
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • command: Swipe Right (Next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem, image"
More information
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: "Pythagorean Theorem, image"
More information
Windows Speech RecognitionChromenot applicable-More information

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

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingIEnot applicable-More information
Dragon Naturally SpeakingFirefoxnot applicable-More information
JAWSEdgeunknown-More information
NarratorFirefoxunknown-More information
NarratorChromeunknown-More information
NarratorIEunknown-More information
NVDAIEunknown-More information
NVDAEdgeunknown-More information
TalkBackFirefoxunknown-More information
Voice Access (Android)Firefoxnot applicable-More information
VoiceOver (iOS)Chromeunknown-More information
VoiceOver (macOS)Chromeunknown-More information
VoiceOver (macOS)Firefoxunknown-More information
OrcaChromeunknown-More information
Voice Control (MacOS)Chromenot applicable-More information
Voice Control (MacOS)Firefoxnot applicable-More information
Windows Speech RecognitionEdgenot applicable-More information
Back to top

History

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