aria-controls identifies the element(s) whose contents or presence are controlled by the element on which this attribute is set.
When to use
- Tabs or accordions
Example
<div role='tablist' aria-label='Tabs'>
<span aria-selected='true' aria-controls='panel-1' id='tab1'>First Tab</span>
<span aria-selected='false' aria-controls='panel-2' id='tab2'>Second Tab</span>
<span aria-selected='false' aria-controls='panel-3' id='tab3'>Third Tab</span>
</div>
<div id='panel-1' role='tabpanel' aria-labelledby='tab1'>Content</div>
<div id='panel-2' role='tabpanel' aria-labelledby='tab2'>Content</div>
<div id='panel-3' role='tabpanel' aria-labelledby='tab3'>Content</div>