aria-controls attribute (aria)
Screen Reader support level: partial (10/42)
On this page
- About this feature
- Age of results
- Expectations
- Related tests
- Related AT or browser issues
- Is something not right?
About this feature
Identifies the element (or elements) whose contents or presence are controlled by the current element. See related aria-owns.
Age of results
Results across all tests for this feature range from a year ago to 6 years ago. Detailed dates and version information can be found in associated tests.
Caution
Failing or partial results may be out of date. The oldest result is from 6 years ago. Consider running the associated tests and contributing results.
Expectations
Important: The aria-controls attribute has expectations that are not directly testable by end users. Continue to use it if it is required by the specification, even if user-facing expectation support is poor. For more information, see FAQ: What about expectations that are not directly testable by users?.
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 | |
| SHOULD convey the presence of the aria-controls attribute | none | none | none | none | none | none | none | none | none | none | none |
| MUST allow the user to jump to the controlled element | supported | supported | supported | none | none | none | none | none | none | none | none |
Expectation: convey the presence of the aria-controls attribute
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
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.
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.
| Test | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| APG Editable Combobox With List Autocomplete Example applied to: combobox role | none | none | none | none | none | none | none | none | none | none | none |
| APG Editable Combobox With List Autocomplete Example applied to: button element | none | none | none | none | none | none | none | none | none | none | none |
| APG Actions Menu Button Example Using aria-activedescendant applied to: button element | none | none | none | none | none | none | none | none | none | none | none |
| aria-controls attribute applied to: button element | none | none | none | none | none | none | none | none | none | none | none |
Expectation: 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.
Strength of this expectation for different types of assistive technologies:
- Screen Readers: MUST
- Voice Control: NA
| Test | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| APG Editable Combobox With List Autocomplete Example applied to: combobox role | supported | supported | supported | none | none | none | none | none | none | none | none |
| APG Editable Combobox With List Autocomplete Example applied to: button element | supported | supported | supported | none | none | none | none | none | none | none | none |
| APG Actions Menu Button Example Using aria-activedescendant applied to: button element | not applicable | not applicable | supported | none | none | none | none | none | none | none | none |
| aria-controls attribute applied to: button element | supported | supported | supported | none | none | none | none | none | none | none | none |