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 |
aria-controls 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