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>

Working Examples of Accessible TabPanel System

jQuery Accessible tab panel system, using ARIA – By Nicolas Hoffmann

ARIA tab panel example

 

Leave a Reply

Your email address will not be published. Required fields are marked *