WAI-ARIA: aria-controls (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : Properties
WAI-ARIA: aria-controls (Property)
WAI-ARIA: aria-controls (Property)

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

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
SHOULD convey the presence of the aria-controls attributenonenonepartial (1/4)nonenonenonenonenonenonenonenone
MUST allow the user to jump to the controlled elementsupportedsupportedsupportednonenonenonenonenonenonenonenone

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

Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.

Similar Posts

WAI-ARIA: aria-rowindex (Property)

WAI-ARIA: aria-rowindex (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description Defines an element’s row index or position with respect to the total number of rows within a table, grid, or treegrid. See related aria-rowcount and aria-rowspan. If all of the rows are present in the DOM, it is not necessary to set this attribute as the user agent can automatically calculate the index of…

WAI-ARIA: aria-details (Property)

WAI-ARIA: aria-details (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description New in ARIA 1.1Identifies the element that provides a detailed, extended description for the object. See related aria-describedby. The aria-details attribute references a single element that provides more detailed information than would normally be provided by aria-describedby. It enables assistive technologies to make users aware of the availability of an extended description as well…

WAI-ARIA: aria-keyshortcuts (Property)

WAI-ARIA: aria-keyshortcuts (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description New in ARIA 1.1 Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. The value of the aria-keyshortcuts attribute is a space-delimited list of keyboard shortcuts that can be pressed to activate a command or textbox widget. The keys defined in the shortcuts represent the physical keys…

WAI-ARIA: aria-orientation (Property)

WAI-ARIA: aria-orientation (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description Indicates whether the element’s orientation is horizontal, vertical, or unknown/ambiguous. Note: In ARIA 1.1, the default value for aria-orientation changed from horizontal to undefined. Implicit defaults are defined on some roles (e.g., slider defaults to horizontal; scrollbar defaults to vertical) but remain undefined on roles where an expected default orientation is ambiguous (e.g., radiogroup). Browser…

WAI-ARIA: aria-rowspan (Property)

WAI-ARIA: aria-rowspan (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. See related aria-rowindex and aria-colspan. This attribute is intended for cells and gridcells which are not contained in a native table. When defining the row span of cells or gridcells in a native table, authors SHOULD use…

WAI-ARIA: aria-owns (Property)

WAI-ARIA: aria-owns (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
2 Comments

Description Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. See related aria-controls. The value of the aria-owns attribute is a space-separated list of IDREFS that reference one or more elements in the document…

Leave a Reply

Your email address will not be published. Required fields are marked *