ARIA-controls property provide 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. Check the below example to understand the usage of ARIA-controls.
ARIA-controls 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 notify 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.