Properties

WAI-ARIA: aria-controls (Property)

Authored By :Raghavendra Satish Peri Last Updated :April 20, 2023 Properties

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)
Expectation	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

Related Insights on Accessibility

Raghavendra Satish Peri

Raghavendra Satish Peri is a digital Transformation specialist working with small & large enterprises in the areas of digital accessibility & digital marketing. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers, and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books, or writing on his Personal Blog at raghava.in.

Properties

WAI-ARIA: aria-placeholder (Property)

Authored By :Raghavendra Satish Peri Last Updated On :April 20, 2023

Description New in ARIA 1.1 Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. Authors SHOULD NOT use aria-placeholder instead of a label as their purposes…

Properties

WAI-ARIA: aria-setsize (Property)

Authored By :Raghavendra Satish Peri Last Updated On :April 20, 2023

Description Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. See related aria-posinset. This property is marked on the members of a set, not the container element that collects the members of the set. To orient the user…

Properties

WAI-ARIA: aria-level (Property)

Authored By :Raghavendra Satish Peri Last Updated On :April 20, 2023

Description Defines the hierarchical level of an element within a structure. This can be applied inside trees to tree items, to headings inside a document, to nested grids, nested tablists and to other structural items that may appear inside a container or participate in an ownership hierarchy. The value for aria-level is an integer greater…

Properties

WAI-ARIA: aria-flowto (Property)

Authored By :Raghavendra Satish Peri Last Updated On :April 20, 2023

Description Identifies the next element (or elements) in an alternate reading order of content which, at the user’s discretion, allows assistive technology to override the general default of reading in document source order. When aria-flowto has a single IDREF, it allows assistive technologies to, at the user’s request, forego normal document reading order and go…

Properties

WAI-ARIA: aria-readonly (Property)

Authored By :Raghavendra Satish Peri Last Updated On :April 20, 2023

Description Indicates that the element is not editable, but is otherwise operable. See related aria-disabled. This means the user can read but not set the value of the widget. Readonly elements are relevant to the user, and application authors SHOULD NOT restrict navigation to the element or its focusable descendants. Other actions such as copying…

Properties

WAI-ARIA: aria-colspan (Property)

Authored By :Raghavendra Satish Peri Last Updated On :April 20, 2023

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

Leave a Reply Cancel reply