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

Test: aria-controls attribute

Current support: partial (3/9)

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

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

Assertion support summary by assertion

FeatureAssertionSupportHas failing tests
aria-controls attributeThe screen reader MUST convey the presence of the aria-controls attribute if its value is not empty and is validpartial (3/9)Yes

aria-controls attribute: The screen reader MUST convey the presence of the aria-controls attribute if its value is not empty and is valid

This assertion is from the aria-controls attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
JAWS 2018.1811.2Google Chrome 73yes
  • Result: (pass)
    • command: Tab
    • Output: target button, use jaws key + alt + M to move to controlled element
More information
JAWS 2018.1811.2Internet Explorer 11yes
  • Result: (pass)
    • command: Tab
    • Output: target button, use jaws key + alt + M to move to controlled element
More information
JAWS 2018.1811.2Firefox (desktop) 66yes
  • Result: (pass)
    • command: Tab
    • Output: target button, use jaws key + alt + M to move to controlled element
More information
Narrator 1809Microsoft Edge 44.17763none
  • Result: (fail)
    • command: Tab
    • Output: (property was not conveyed)
More information
NVDA 2019.0.1Google Chrome 73none
  • Result: (fail)
    • command: Tab
    • Output: (property was not conveyed)
More information
NVDA 2019.0.1Firefox (desktop) 66none
  • Result: (fail)
    • command: Tab
    • Output: (property was not conveyed)
More information
TalkBackGoogle Chrome (android)unknown-More information
VoiceOver for iOS 12.2Safari (iOS) 12.2none
  • Result: (fail)
    • command: Swipe Right
    • Output: (property was not conveyed)
More information
VoiceOver for macOS 10.14.4Safari (macOS) 12.1none
  • Result: (fail)
    • command: Tab
    • 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 if its value is not empty and is valid

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWS 2018.1811.2Microsoft Edge 44none
  • Result: (fail)
    • command: Tab
    • 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
    • Output: (property was not conveyed)
More information
NVDA 2019.0.1Microsoft Edge 44.17763none
  • Result: (fail)
    • command: Tab
    • Output: (property was not conveyed)
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-04-09 Test created