Summary - Accessible tabpanel

Write a tabpanel component skeleton with all ARIA patterns.

What we learned in this group

In this group you met the ARIA patterns:

The role attribute and its four classes: widget, document, landmark, abstract.
State vs property: aria-expanded, aria-hidden, aria-disabled.
Grid and tree patterns: role="grid", role="tree", role="treegrid".
Tabs and accordion: tablist, tab, tabpanel, aria-selected.
Menu and menubar: aria-haspopup, menuitem.

Now we will combine them into one accessible tabpanel skeleton.

Exercise Accessible tabpanel skeleton

Add a <div role="tablist"> to body; inside it put two <button role="tab">. The first tab has id t1, aria-selected true, aria-controls p1 and the text General. The second tab has aria-selected false, aria-controls p2 and the text Details. Add a <div role="tabpanel" id="p1" aria-labelledby="t1"> to body with a <p> inside, its text General content.

Show example solution

<body>
  <div role="tablist">
    <button role="tab" id="t1" aria-selected="true" aria-controls="p1">General</button>
    <button role="tab" aria-selected="false" aria-controls="p2">Details</button>
  </div>
  <div role="tabpanel" id="p1" aria-labelledby="t1">
    <p>General content.</p>
  </div>
</body>

Test yourself

Match each role to its meaning

role="tablist"

Tab list
role="tab"

Single tab
role="tabpanel"

Tab content
aria-selected="true"

Selected tab
aria-controls="p1"

Tab to panel link
Which attribute tells that a tab controls its content region?
- aria-labelledby
- aria-controls
- aria-expanded
- aria-haspopup
Show answer

aria-controls — Correct. aria-controls carries the id of the element an item controls.

Complete the selected tab's attribute

<button role="tab" aria-selected="____" aria-controls="p1">General</button>

Show answer

<button role="tab" aria-selected="true" aria-controls="p1">General</button>

Next lesson: Project: High-performance page

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies