Test: aria-controls attribute
Screen Reader support level: partial (3/11)
Voice Control support level: unknown
On this page
- About this test
- Age of results
- Test HTML
- Dates and Versions of tested combinations
- Summary of screen reader support by expectation
- Summary of voice control support by expectation
- Detailed support tables
- History
- Related features
- Contribute and Feedback
About this test
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.
Age of results
Results in this test range from 2 years ago to 4 years ago. See detailed information about test dates and versions for more information.
Caution
Failing or partial results may be out of date. The oldest result is from 4 years ago. Consider running this test and contributing results.
Test HTML
pen the test case HTML file<!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>
Summary of Screen Reader support by expectation
Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
MUST allow the user to jump to the controlled element applied to: button element | supported | supported | supported | none | none | none | none | none | none | none | none |
SHOULD convey the presence of the aria-controls attribute applied to: button element | none | none | none | none | none | none | none | none | none | none | none |
* means that some support is hidden behind settings
Summary of Voice Control support by expectation
Expectation | Dragon Naturally Speaking | Voice Access (Android) | Voice Control (iOS) | Voice Control (MacOS) | Windows Speech Recognition | Windows Voice Access | ||
---|---|---|---|---|---|---|---|---|
Chrome | Chrome | Safari | Safari | Edge | Chrome | Edge | Chrome | |
Not applicable |
* means that some support is hidden behind settings
Detailed support results by expectation
Expectation for the aria-controls attribute: allow the user to jump to the controlled element - applied to the button element
This expectation is applied to the button element. Expectations and results might differ when the the feature is applied to different roles.
This expectation is from the aria-controls attribute feature.
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.
Strength of this expectation 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.
AT | Browser | Has Support | Output |
---|---|---|---|
Dragon Naturally Speaking | Chrome | not applicable | - |
JAWS | Chrome | yes |
|
JAWS | Edge | yes |
|
JAWS | Firefox | yes |
|
Narrator | Edge | none |
|
NVDA | Chrome | none |
|
NVDA | Edge | none |
|
NVDA | Firefox | none |
|
Orca | Firefox | none |
|
TalkBack | Chrome | none |
|
Voice Access (Android) | Chrome | not applicable | - |
Voice Control (iOS) | Safari | not applicable | - |
Voice Control (MacOS) | Safari | not applicable | - |
VoiceOver (iOS) | Safari | none |
|
VoiceOver (macOS) | Safari | none |
|
Windows Speech Recognition | Edge | not applicable | - |
Windows Speech Recognition | Chrome | not applicable | - |
Windows Voice Access | Edge | not applicable | - |
Windows Voice Access | Chrome | not applicable | - |
Extended Support for: aria-controls attribute: allow the user to jump to the controlled element
These are less common combinations
AT | Browser | Has Support | Output |
---|---|---|---|
Dragon Naturally Speaking | IE | not applicable | - |
Dragon Naturally Speaking | Firefox | not applicable | - |
JAWS 2020.2008.24 | IE 11 | yes |
|
Narrator | Firefox | unknown | - |
Narrator | Chrome | unknown | - |
Narrator | IE | unknown | - |
NVDA 2019.0.1 | IE 11 | none |
|
TalkBack | Firefox | unknown | - |
Voice Access (Android) | Firefox | not applicable | - |
VoiceOver (iOS) | Chrome | unknown | - |
VoiceOver (macOS) | Chrome | unknown | - |
VoiceOver (macOS) | Firefox | unknown | - |
Orca | Chrome | unknown | - |
Voice Control (MacOS) | Chrome | not applicable | - |
Voice Control (MacOS) | Firefox | not applicable | - |
Expectation for the aria-controls attribute: convey the presence of the aria-controls attribute - applied to the button element
This expectation is applied to the button element. Expectations and results might differ when the the feature is applied to different roles.
This expectation is from the aria-controls attribute feature.
Rationale:
Users need to be aware that an element has aria-controls functionality. If the presence of the attribute is not explicitly conveyed, then users may not be aware of the functionality. However, some screen readers may choose to not convey the presence by default since the controlled element is usually directly after the controlling element in the reading order and easily findable. In these situations, explicitly conveying the presence could be unnecessarily verbose.
Strength of this expectation for different types of assistive technologies:
- Screen Readers: SHOULD
- Voice Control: NA
Examples:
- When supported, screen readers will often hint that an element controls another element, and may even announce the keyboard shortcut to jump to the controlled element
- Most screen readers either do not support this attribute or the setting to convey the presence is turned off by default. This is because in the vast majority of cases, the controlled element is adjacent to the element with aria-controls, and thus announcing the presence is redundant and add extra verbosity.
Grading method:
Just one of the listed commands must pass for the expectation to pass.
Notes:
This is not a MUST requirement, because the functionality could still be discoverable via the screen reader's command to jump to the controlled element. If the command fails, the attribute is not present.
AT | Browser | Has Support | Output |
---|---|---|---|
Dragon Naturally Speaking | Chrome | not applicable | - |
JAWS | Chrome | none |
|
JAWS | Edge | none |
|
JAWS | Firefox | none |
|
Narrator | Edge | none |
|
NVDA | Chrome | none |
|
NVDA | Edge | none |
|
NVDA | Firefox | none |
|
Orca | Firefox | none |
|
TalkBack | Chrome | none |
|
Voice Access (Android) | Chrome | not applicable | - |
Voice Control (iOS) | Safari | not applicable | - |
Voice Control (MacOS) | Safari | not applicable | - |
VoiceOver (iOS) | Safari | none |
|
VoiceOver (macOS) | Safari | none |
|
Windows Speech Recognition | Edge | not applicable | - |
Windows Speech Recognition | Chrome | not applicable | - |
Windows Voice Access | Edge | not applicable | - |
Windows Voice Access | Chrome | not applicable | - |
Extended Support for: aria-controls attribute: convey the presence of the aria-controls attribute
These are less common combinations
AT | Browser | Has Support | Output |
---|---|---|---|
Dragon Naturally Speaking | IE | not applicable | - |
Dragon Naturally Speaking | Firefox | not applicable | - |
JAWS 2020.2008.24 | IE 11 | none |
|
Narrator | Firefox | unknown | - |
Narrator | Chrome | unknown | - |
Narrator | IE | unknown | - |
NVDA 2019.0.1 | IE 11 | none |
|
TalkBack | Firefox | unknown | - |
Voice Access (Android) | Firefox | not applicable | - |
VoiceOver (iOS) | Chrome | unknown | - |
VoiceOver (macOS) | Chrome | unknown | - |
VoiceOver (macOS) | Firefox | unknown | - |
Orca | Chrome | unknown | - |
Voice Control (MacOS) | Chrome | not applicable | - |
Voice Control (MacOS) | Firefox | not applicable | - |
Dates and Versions of tested combinations
AT | AT Version | Browser | Browser version | OS version | Date tested |
---|---|---|---|---|---|
JAWS | 2020.2006.12 | Chrome | 84 | Windows 10 version 2004 | 2020-07-02 |
JAWS | 2021.2105.53 | Edge | 91 | Windows 10 version 21h1 | 2021-07-15 |
JAWS | 2020.2008.24 | Firefox | 82 | Windows 10 version 2004 | 2020-11-09 |
Narrator | Windows 10 version 1809 | Edge | 44.17763 | Windows 10 version 1809 | 2019-04-09 |
NVDA | 2021.1 | Chrome | 91 | Windows 10 version 21h1 | 2021-07-15 |
NVDA | 2021.1 | Edge | 91 | Windows 10 version 21h1 | 2021-07-15 |
NVDA | 2019.0.1 | Firefox | 66 | Windows 10 version 1809 | 2019-04-09 |
Orca | 3.31.4 | Firefox | 69 | Ubuntu 19.04 | 2019-09-16 |
TalkBack | 7.3.0 | Chrome | 75 | 7.0 | 2019-07-27 |
VoiceOver (iOS) | 12.2 | Safari | 12.2 | 12.2 | 2019-04-09 |
VoiceOver (macOS) | 10.14.4 | Safari | 12.1 | 10.14.4 | 2019-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.
- 2019-09-16 Added orca results
- 2020-02-10 updated core JAWS results - which are the same
- 2020-11-09 Updated core JAWS results. As of the JAWS 2020 release, it no longer has a setting to convey the presence of the attribute. The setting in JAWS 2019 was located at Utilities > Settings center > Speech and Sounds Schemes > Modify Schemes > Edit selected scheme > HTML Tab > switch "controls" to "Speak HTML attribute"
- 2021-07-15 Added Narrator results for NVDA and JAWS, updated NVDA+Chrome results.