The Tabs Pattern: tablist, tab, tabpanel
Wire the three roles a tab set needs.
What a Tab Set Really Is
A tab set shows one panel at a time and lets users switch between them. To assistive tech it must look like one widget, not loose links.
Three Roles Work Together
The pattern relies on three ARIA roles: a tablist that holds the tabs, each tab, and the panel each tab reveals. Get all three right.
All lessons in this course
- The Tabs Pattern: tablist, tab, tabpanel
- Arrow-Key Navigation Between Tabs
- Accordions With Button and aria-expanded
- Disclosure vs Tabs: Pick the Right One