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

Test: aria-details test

Current support: partial (6/36)

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

Assertions are conditions that must be met for the feature to be considered as "supported". Only "MUST" assertions need to be met for minimal "support". "SHOULD" and "MAY" assertions indicates support that goes above and beyond. Note that there is not an explicit standard that dictates these assertions, and as such, they are likely opinionated. Minimal support reflects that the structure, relationships, and functionality of the feature are conveyed and operable by assistive technology rather than minimal conformance to any specific WCAG SC. As such, a feature might not meet all "MUST" assertions but still be usable (potentially frustratingly so).

Assertion support summary by type of assertion
MUSTSHOULDMAY
partial (3/9)no known supportpartial (3/9)

Assertion support summary by assertion

FeatureAssertionSupportHas failing tests
aria-details attributeThe screen reader MUST convey the presence of aria-detailspartial (3/9)Yes
aria-details attributeThe screen reader SHOULD allow the user to jump to the referenced elementno known supportYes
aria-details attributeThe screen reader SHOULD allow the user to jump back to the referencing elementno known supportYes
aria-details attributeThe screen reader MAY convey the boundaries of the detailspartial (3/9)Yes

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

This assertion is from the aria-details attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
JAWS 2018.1811.2Google Chrome 74yes
  • Result: (pass)
    • command: Down arrow
    • Output: "Graphic, unavailable, Pythagorean Theorem, has details."
More information
JAWS 2018.1811.2Internet Explorer 11.134yes
  • Result: (pass)
    • command: Down arrow
    • Output: "Graphic, unavailable, Pythagorean Theorem, has details."
More information
JAWS 2018.1811.2Firefox (desktop) 66yes
  • Result: (pass)
    • command: Down arrow
    • Output: "Pythagorean Theorem, has details."
More information
Narrator 1809Microsoft Edge 44.17763none
  • Result: (fail)
    • command: Down arrow
    • Output: "Image, Pythagorean Theorem"
More information
NVDA 2018.1808.10Google Chrome 74none
  • Result: (fail)
    • command: down arrow
    • Output: "Graphic, Pythagorean Theorem"
More information
NVDA 2018.3.2Firefox (desktop) 66none
  • Result: (fail)
    • command: down arrow
    • Output: "Pythagorean Theorem"
More information
TalkBackGoogle Chrome (android)unknown-More information
VoiceOver for iOS 12.2Safari (iOS) 12.2none
  • Result: (fail)
    • command: Swipe Right
    • Output: "Pythagorean Theorem, image"
More information
VoiceOver for macOS 10.14.4Safari (macOS) 12.1none
  • Result: (fail)
    • command: VO + Right arrow
    • 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 SpeakingFirefox (desktop)not applicable-More information
Dragon Naturally SpeakingGoogle Chromenot 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 (desktop)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information

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.

This assertion is from the aria-details attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
JAWS 2018.1811.2Google Chrome 74none
  • Result: (fail)
    • command: equals sign
    • Output: (does not let user navigate to the referenced element)
More information
JAWS 2018.1811.2Internet Explorer 11.134none
  • Result: (fail)
    • command: Down arrow
    • Output: (does not let user navigate to the referenced element)
More information
JAWS 2018.1811.2Firefox (desktop) 66none
  • Result: (fail)
    • command: equals sign
    • Output: (does not let user navigate to the referenced element)
More information
Narrator 1809Microsoft Edge 44.17763none
  • Result: (fail)
    • command: Down arrow
    • Output: (does not let user navigate to the referenced element)
More information
NVDA 2018.1808.10Google Chrome 74none
  • Result: (fail)
    • command: down arrow
    • Output: (does not let user navigate to the referenced element)
More information
NVDA 2018.3.2Firefox (desktop) 66none
  • Result: (fail)
    • command: down arrow
    • Output: (does not let user navigate to the referenced element)
More information
TalkBackGoogle Chrome (android)unknown-More information
VoiceOver for iOS 12.2Safari (iOS) 12.2none
  • Result: (fail)
    • command: Swipe Right
    • Output: (does not let user navigate to the referenced element)
More information
VoiceOver for macOS 10.14.4Safari (macOS) 12.1none
  • Result: (fail)
    • command: VO + Right arrow
    • 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 SpeakingFirefox (desktop)not applicable-More information
Dragon Naturally SpeakingGoogle Chromenot 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 (desktop)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information

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.

This assertion is from the aria-details attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
JAWS 2018.1811.2Google Chrome 74none
  • Result: (fail)
    • command: equals sign
    • Output: (does not let user navigate to the referenced element)
More information
JAWS 2018.1811.2Internet Explorer 11.134none
  • Result: (fail)
    • command: Down arrow
    • Output: (does not let user navigate to the referenced element)
More information
JAWS 2018.1811.2Firefox (desktop) 66none
  • Result: (fail)
    • command: equals sign
    • Output: (does not let user navigate to the referenced element)
More information
Narrator 1809Microsoft Edge 44.17763none
  • Result: (fail)
    • command: Down arrow
    • Output: (does not let user navigate to the referenced element)
More information
NVDA 2018.1808.10Google Chrome 74none
  • Result: (fail)
    • command: down arrow
    • Output: (does not let user navigate to the referenced element)
More information
NVDA 2018.3.2Firefox (desktop) 66none
  • Result: (fail)
    • command: down arrow
    • Output: (does not let user navigate to the referenced element)
More information
TalkBackGoogle Chrome (android)unknown-More information
VoiceOver for iOS 12.2Safari (iOS) 12.2none
  • Result: (fail)
    • command: Swipe Right
    • Output: (does not let user navigate to the referenced element)
More information
VoiceOver for macOS 10.14.4Safari (macOS) 12.1none
  • Result: (fail)
    • command: VO + Right arrow
    • 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 SpeakingFirefox (desktop)not applicable-More information
Dragon Naturally SpeakingGoogle Chromenot 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 (desktop)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information

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.

This assertion is from the aria-details attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
JAWS 2018.1811.2Google Chrome 74yes
  • Result: (pass)
    • command: Down arrow
    • Output: "Entering details"
  • Result: (pass)
    • command: Down arrow
    • Output: "Leaving"
More information
JAWS 2018.1811.2Internet Explorer 11.134yes
  • Result: (pass)
    • command: Down arrow
    • Output: "Entering details"
  • Result: (pass)
    • command: Down arrow
    • Output: "Leaving"
More information
JAWS 2018.1811.2Firefox (desktop) 66yes
  • Result: (pass)
    • command: Down arrow
    • Output: "Entering details"
  • Result: (pass)
    • command: Down arrow
    • Output: "Leaving"
More information
Narrator 1809Microsoft Edge 44.17763none
  • Result: (fail)
    • command: Down arrow
    • Output: (does not convey boundaries)
More information
NVDA 2018.1808.10Google Chrome 74none
  • Result: (fail)
    • command: down arrow
    • Output: (does not convey boundaries)
More information
NVDA 2018.3.2Firefox (desktop) 66none
  • Result: (fail)
    • command: down arrow
    • Output: (does not convey boundaries)
More information
TalkBackGoogle Chrome (android)unknown-More information
VoiceOver for iOS 12.2Safari (iOS) 12.2none
  • Result: (fail)
    • command: Swipe Right
    • Output: (does not convey boundaries)
More information
VoiceOver for macOS 10.14.4Safari (macOS) 12.1none
  • Result: (fail)
    • command: VO + Right arrow
    • 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 SpeakingFirefox (desktop)not applicable-More information
Dragon Naturally SpeakingGoogle Chromenot 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 (desktop)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information

History

  • 2019-05-19 Test created