Description
A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.
If a tabpanel or item in a tabpanel has focus, the associated tab is the currently active tab in the tablist, as defined in Managing Focus. tablist elements, which contain a set of associated tab elements, are typically placed near a series of tabpanel elements, usually preceding it. See the WAI-ARIA Authoring Practices [wai-aria-practices-1.1] for details on implementing a tab set design pattern.
Authors MUST ensure elements with role tab are contained in, or owned by, an element with the role tablist.
Authors SHOULD ensure the tabpanel associated with the currently active tab is perceivable to the user.
For a single-selectable tablist, authors SHOULD hide other tabpanel elements from the user until the user selects the tab associated with that tabpanel. For a multi-selectable tablist, authors SHOULD ensure each visible tabpanel has its aria-expanded attribute set to true, and that the remaining hidden tabpanel elements have their aria-expanded attributes set to false.
In either case, authors SHOULD ensure that a selected tab has its aria-selected attribute set to true, that inactive tab elements have their aria-selected attribute set to false, and that the currently selected tab provides a visual indication that it is selected. In the absence of an aria-selected attribute on the current tab, user agents SHOULD indicate to assistive technologies through the platform accessibility API that the currently focused tab is selected.
Example
HTML Example
<ul role=”tablist”>
<li>
<a href=”#first-tab” role=”tab” aria-selected=”true” aria-controls=”first-tab”>Panel 1</a>
</li>
<li>
<a href=”#second-tab” role=”tab” aria-selected=”false” aria-controls=”second-tab”>Panel 2</a>
</li>
</ul>
<div id=”first-tab” role=”tabpanel”></div>
<div id=”second-tab” role=”tabpanel”></div>
Characteristics
Superclass Role
- sectionhead
- widget
Required Context Role
- tablist
Supported States and Properties
- aria-posinset
- aria-selected
- aria-setsize
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- contents
- author
Children Presentational
- True
Implicit Value for Role
- Default for aria-selected is false.
Semantic HTML
No HTML element equivalent.
Reference
- W3C (opens new window)