Elements utilizing certain ARIA roles require that the contents within the element also have certain roles.
Some common examples of these ARIA roles are: tablist, list, table, and menu.
For instance, an unordered list (ul) with role="tablist" should contain elements with the role="tab". Elements with role="list" should contain elements with role="listitem."
The following is an HTML example utilizing tablist:
<ul role="tablist">
<li role="tab" aria-controls="panel-1">Tab 1</li>
<li role="tab" aria-controls="panel-2">Tab 2</li>
<li role="tab" aria-controls="panel-3">Tab 3</li>
</ul>
<div role="tabpanel" id="panel-1">Panel 1</div>
<div role="tabpanel" id="panel-2" class="hidden">Panel 2</div>
<div role="tabpanel" id="panel-3" class="hidden">Panel 3</div>
Available ARIA roles are documented by w3.org website. Developers can utilize the documentation by clicking on each role to see if the role requires the use of specific ARIA roles on children elements.