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");