Challenge - ARIA tabpanel
Write a tabbed interface with the full ARIA tabpanel pattern.
ARIA tabpanel pattern
The ARIA tabpanel is a pattern that makes tabbed content accessible. The container gets role="tablist", each tab gets role="tab", and the content panels get role="tabpanel". Tabs are usually <button> elements; tabindex is set so they can be navigated by keyboard.
The selected tab takes aria-selected="true", the others false. Each tab links to its panel's id via aria-controls; each panel links back to its tab via aria-labelledby. These relationships let screen readers convey the structure.
Exercise Write a two-tab tabpanel
Write a two-tab ARIA tabpanel. Give a container role="tablist" and place two <button role="tab"> inside; give one aria-selected="true". Each tab must link to a panel id via aria-controls. Then add two <div> elements with role="tabpanel"; each id must match the corresponding tab's aria-controls value.
Show example solution
Two tabs in the tab list, with matching ids on the panels.
Example solution:
<div role="tablist">
<button role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1">General</button>
<button role="tab" id="tab-2" aria-selected="false" aria-controls="panel-2">Security</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
<p>General settings.</p>
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2">
<p>Security settings.</p>
</div>Test yourself
-
Match the tab roles
- role="tablist"
- Tab list container
- role="tab"
- A single tab
- role="tabpanel"
- Tab content panel
- aria-selected="true"
- Selected tab state
-
Mark the selected tab
<button role="tab" ____ aria-controls="panel-1" id="tab-1">General</button>Show answer
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">General</button> -
Which attribute marks the selected tab?
- aria-hidden="true"
- aria-selected="true"
- tabindex="0"
- role="tab"
Show answer
aria-selected="true" — Correct. aria-selected="true" tells screen readers which tab is selected.