WCAG 2.1 AA • AODA compliant • Updated 2025-10-28
What is this component? Tabs organize content into sections, one panel visible at a time. Requires keyboard support and ARIA relationships.
| Requirement | WCAG Criteria | Description |
|---|---|---|
| Keyboard | 2.1.1 | Tab moves focus to active tab; arrows move between tabs; Enter/Space activates. |
| Focus visible | 2.4.7 | Show a visible focus indicator on the focused tab. |
| Name/Role/Value | 4.1.2 | Expose roles (tablist, tab, tabpanel) and relationships; only one tab selected. |
| ARIA Role/Attribute | Used On | Purpose & Usage |
|---|---|---|
role="tablist" | Container of tabs | Groups tabs. |
role="tab" + aria-selected + aria-controls | Each tab | Identifies selected tab and associated panel. |
role="tabpanel" + aria-labelledby | Each panel | Connects panel to its tab label. |
Overview content...
Specs content...
| Test Item | WCAG Criteria | Pass Criteria |
|---|---|---|
| Roles/States | 4.1.2 | AT announces tab/selected/panel labels. |
| Keyboard nav | 2.1.1 | Arrows move; Enter/Space activates. |