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

Test: aria-controls attribute

Current support: partial (6/18)

Tests the aria-controls attribute. This test just asserts that a screen reader conveys that the target element controls something. Screen readers might convey this differently. They may announce that the element controls something, or/and announce the keyboard shortcut to jump to the target. This test does not assert that a screen reader supports jumping to the target.

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-controls examples</title>
</head>
<body>

<h1>aria-controls examples</h1>

<button id="target" aria-controls="controls-target">Target</button>

<div>content 1</div>

<div id="controls-target">content 2</div>

</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 (6/18)

Summary of support by expectation and assistive technology

ExpectationDragon Naturally SpeakingJAWSNarratorNVDATalkBackVoiceOver for iOSVoiceOver for macOS
aria-controls attribute
MUST convey the presence of the aria-controls attributenot applicablesupported*nonenonenonenonenone
MUST allow the user to jump to the controlled elementnot applicablesupportednonenonenonenonenone

* means that some support is hidden behind settings

Detailed support results by expectation

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

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

This expectation is from the aria-controls attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • Output: target button, use jaws key + alt + M to move to controlled element
    • Must change default settings to enable support: Utilities > Settings center > Settings Center > Speech and Sounds Schemes > Modify Schemes > Edit selected scheme > HTML Tab > switch "controls" to "Speak HTML attribute"
More information
JAWSInternet Exploreryes
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • Output: target button, use jaws key + alt + M to move to controlled element
    • Must change default settings to enable support: Utilities > Settings center > Settings Center > Speech and Sounds Schemes > Modify Schemes > Edit selected scheme > HTML Tab > switch "controls" to "Speak HTML attribute"
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • Output: target button, use jaws key + alt + M to move to controlled element
    • Must change default settings to enable support: Utilities > Settings center > Settings Center > Speech and Sounds Schemes > Modify Schemes > Edit selected scheme > HTML Tab > switch "controls" to "Speak HTML attribute"
More information
NarratorMicrosoft Edgenone
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: (property was not conveyed)
More information
NVDAGoogle Chromenone
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: (property was not conveyed)
More information
NVDAFirefox (desktop)none
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: (property was not conveyed)
More information
TalkBackGoogle Chrome (android)none
  • Result: (fail)
    • command: Swipe right (Read next item)
    • Output: (property was not conveyed)
More information
VoiceOver for iOSSafari (iOS)none
  • Result: (fail)
    • command: Swipe Right (Next item)
    • Output: (property was not conveyed)
More information
VoiceOver for macOSSafari (macOS)none
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: (property was not conveyed)
More information

Extended Support for: aria-controls attribute: The screen reader MUST convey the presence of the aria-controls attribute

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWS 2018.1811.2Microsoft Edge 44none
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: "target button"
More information
NarratorFirefox (desktop)unknown-More information
NarratorGoogle Chromeunknown-More information
NarratorInternet Explorerunknown-More information
NVDA 2019.0.1Internet Explorer 11none
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: (property was not conveyed)
More information
NVDA 2019.0.1Microsoft Edge 44.17763none
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: (property was not conveyed)
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-controls attribute: The screen reader MUST allow the user to jump to the controlled element

Rationale: The controlled element might not be close to the element with aria-controls and the user might find it convenient to jump directly to the controlled element.

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

This expectation is from the aria-controls attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Insert + alt + M (Jump to controlled element)
    • Output: target button
More information
JAWSInternet Exploreryes
  • Result: (pass)
    • command: Insert + alt + M (Jump to controlled element)
    • Output: target button
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Insert + alt + M (Jump to controlled element)
    • Output: (navigated to controlled element)
More information
NarratorMicrosoft Edgenone
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: (keyboard shortcut does not exist)
More information
NVDAGoogle Chromenone
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: (keyboard shortcut does not exist)
More information
NVDAFirefox (desktop)none
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: (keyboard shortcut does not exist)
More information
TalkBackGoogle Chrome (android)none
  • Result: (fail)
    • command: Swipe right (Read next item)
    • Output: (shortcut does not exist)
More information
VoiceOver for iOSSafari (iOS)none
  • Result: (fail)
    • command: Swipe Right (Next item)
    • Output: (keyboard shortcut does not exist)
More information
VoiceOver for macOSSafari (macOS)none
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: (keyboard shortcut does not exist)
More information

Extended Support for: aria-controls attribute: The screen reader MUST allow the user to jump to the controlled element

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWS 2018.1811.2Microsoft Edge 44unknown-More information
NarratorFirefox (desktop)unknown-More information
NarratorGoogle Chromeunknown-More information
NarratorInternet Explorerunknown-More information
NVDA 2019.0.1Internet Explorer 11none
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: (keyboard shortcut does not exist)
More information
NVDA 2019.0.1Microsoft Edge 44.17763none
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: (keyboard shortcut does not exist)
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 Chrome7318092019-04-09
JAWS2018.1811.2Internet Explorer1118092019-04-09
JAWS2018.1811.2Firefox (desktop)6618092019-04-09
Narrator1809Microsoft Edge44.1776318092019-04-09
NVDA2019.0.1Google Chrome7318092019-04-09
NVDA2019.0.1Firefox (desktop)6618092019-04-09
TalkBack7.3.0Google Chrome (android)757.02019-07-27
VoiceOver for iOS12.2Safari (iOS)12.212.22019-04-09
VoiceOver for macOS10.14.4Safari (macOS)12.110.14.42019-04-09

History

  • 2019-04-09 Test created
  • 2019-07-27 Talkback results added
  • 2019-08-02 Updated JAWS results, the latest version of JAWS no longer announces this information. Also added the jump assertion.