What is aria-controls?
Identifies the element (or elements) whose contents or presence are controlled by the current element.
Description
Identifies the element (or elements) whose contents or presence are controlled by the current element. See related aria-owns.
For example:
- A table of contents tree view may control the content of a neighboring document pane.
- A group of checkboxes may control what commodity prices are tracked live in a table or graph.
- A tab controls the display of its associated tab panel.
Screen Reader Support For aria-controls
| 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 | partial (1/4) | 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 |
Example
HTML Example
<div role="scrollbar" aria-controls=”main”></div><div id="main">. . .</div>
Characteristics
Used in Roles
- All elements of the base markup
Value
- ID reference list
- A list of one or more ID references.
Semantic HTML
No HTML element equivalent.
Reference
- W3C (opens new window)
- A11Y Support