Note: In my experience Aria Tabs are underused. Without ARIA, only presentation is used to show which tab panel is active and the concept of the tab being a section or page heading is lost.
Let me know if you can identify a coding patterns that suggest a tab.
| Characteristic | Value |
|---|---|
| Superclass Role: | |
| Required Context Role: | tablist |
| Supported States and Properties: | aria-selected (state) |
| Inherited States and Properties: | |
| Name From: |
|
tablist (role)A list of tab elements, which are references to tabpanel elements.
To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus.
tablist elements are typically placed near, usually preceding, a series of tabpanel elements. See the WAI-ARIA Authoring Practices Guide [ARIA-PRACTICES] for details on implementing a tab set design pattern.
| Characteristic | Value |
|---|---|
| Superclass Role: | |
| Related Concepts: | DAISY Guide |
| Required Owned Elements: | tab |
| Supported States and Properties: | |
| Inherited States and Properties: | |
| Name From: |
|
tabpanel (role)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. See the WAI-ARIA Authoring Practices Guide [ARIA-PRACTICES] for details on implementing a tab set design pattern.
| Characteristic | Value |
|---|---|
| Superclass Role: | region |
| Inherited States and Properties: | |
| Name From: | author |
| Accessible Name Required: | True |