Main content

aria-controls

Characteristics

Type:

  • String

Used in Roles:

  • All elements of the base markup (Global)
  • No role required

See related

 

  • aria-owns

Value:

  • ID reference list
  • A space-separated list of ID property values

Identifies the element (or elements) whose contents or presence are controlled by the current element.

ARIA-controls property provides a relation between a parent element and the child element.

For example, to relate tabs and tabpannels, menus and menuitem etc and to pass on the information perfectly to the screen reader users ARIA-controls is used. ARIA-controls use the id of the child element in the parent element to relate each other. 

Example

<ul class="tablist" role="tablist"> 
<li id="tab1" class="tab" aria-controls="panel1" role="tab">Fruits</li> 
<li id="tab2" class="tab" aria-controls="panel2" role="tab">Vegetables </li> 
</ul> 
<div id="panel1" aria-labelledby="tab1" role="tabpanel"> 
<h3>Fruits</h3> 
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
</div> 
<div id="panel2" aria-labelledby="tab2" role="tabpanel"> 
<h3>Vegetables</h3> 
<ul>
<li>Potato</li>
<li>Tomato</li>
<li>Carrot</li>
</ul>
</div>

In the above example, tab 1 (Fruits) controls tabpanel 1 and tab 2 (Vegetables) controls tabpanel 2. ARIA-controls is used in the tab with the id of tabpanel. In addition to ARIA-controls, ARIA roles such as tab, tabpanel, tablist roles are used to notify the user that the list items are tabs. ARIA-labelledby property notifies the label of the tabpanel.

In certain cases, the parent element may control more than one child element. Using the list of id references with ARIA-controls property, the parent element can control all of its child elements.

The aria-controls property is used primarily by elements where the role property value is group, region, or widget. Compare this usage with that of the aria-owns property.

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.

Note  For cross-browser compatibility, always use the WAI-ARIA attribute syntax to access and modify ARIA properties, for example object.setAttribute("aria-valuenow", newValue).

Syntax:

HTML
<element aria-controls="p" ... >
JavaScript
object.setAttribute("aria-controls",value);var value = object.getAttribute("aria-controls");

Microsoft Active Accessibility Properties:

  • N/A

UI Automation Properties: 

  • ControllerFor

UI Automation AriaProperties Property:

  • N/A
More in this category: « aria-autocomplete aria-describedby »