ARIA Role Tabpanel

A container for the resources associated with a tab, where each tab is contained in a tablist.
Authors SHOULD associate a tabpanel element with its tab, either by using the aria-controls attribute on the tab to reference the tab panel, or by using the aria-labelledby attribute on the tab panel to reference the tab.
tablist elements are typically placed near, usually preceding, a series of tabpanel elements.
Key Points
- Tab Panel is the area where content is presented to the user
- Use aria-controls to bind the tab to the tabpanel
- Using aria-labelledby will provide accessible name for the tabpanel
- Assistive technologies will identify the tabpanel region & notify the user
Example Code
<ul id=tabpanel role=tablist>
<li>
<a href=# role=tab id=tab1 aria-controls=panel1 aria-selected=true>Tab1</a>
</li>
<li>
<a href=# role=tab id=tab2 aria-controls=panel2 aria-selected=false>Tab2</a>
</li>
<div role=tabpanel id=panel1 aria-labelledby=tab1>Hello world</div>
<div role=tabpanel id=panel2 aria-labelledby=tab2 aria-hidden=true>Second tab</div>
Missing a closing tag in the code example above.
Thanks for pointing it out. Will check & fix it.