Semantics
A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.
Additional info from the ARIA specification
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 ARIA Authoring Practices Guide for details on implementing a tab set design pattern.
Authors MUST ensure elements with role tab are accessibility children of an element with the role tablist.
Authors MUST ensure that if a tab is active, a corresponding tabpanel that represents the active tab is rendered.
Authors SHOULD associate a tabpanel element with its tab, by using the aria-controls attribute on the tab to reference the tab panel, and/or by using the aria-labelledby attribute on the tab panel to reference the tab.
Authors SHOULD ensure the tabpanel associated with the currently active tab is perceivable to the user.
For a single-selectable tablist, authors SHOULD hide from all users other tabpanel elements until the user selects the tab associated with that tabpanel. For a multi-selectable tablist, authors SHOULD ensure that the tab for each visible tabpanel has the aria-expanded attribute set to true, and that the tabs associated with the remaining hidden from all users tabpanel elements have their aria-expanded attributes set to false.
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 certain conditions, a user agent MAY provide an implicit value for aria-selected for each tab in a tablist, and if it does, the user agent MUST ensure the following conditions are met before providing an implicit value:
Abstract Role
WidgetRepresents a focusable, interactive element.
Content Category
Only Used with Specific Parent Roles
This role must be a direct descendant of one of the following roles:
tablist
Allowed Descendants
Phrasing Children Allowed
No interactive content descendants, and no descendants with a tabindex attribute specified.
Note
Children Become Presentational
Browsers automatically apply the presentation role to all descendant elements, so their semantics are not conveyed to assistive technologies.
Usage
Allowed HTML elements
Implicit semantics
- None
Explicitly allowed
a[href][role=tab]button[role=tab]img[role=tab]
Elements that can have any role
abbr[role=tab]address[role=tab]b[role=tab]blockquote[role=tab]canvas[role=tab]cite[role=tab]code[role=tab]custom-element[role=tab]data[role=tab]del[role=tab]dfn[role=tab]div[role=tab]em[role=tab]figure[role=tab]i[role=tab]ins[role=tab]kbd[role=tab]mark[role=tab]output[role=tab]p[role=tab]pre[role=tab]q[role=tab]samp[role=tab]small[role=tab]span[role=tab]table[role=tab]tbody[role=tab]tfoot[role=tab]thead[role=tab]time[role=tab]u[role=tab]var[role=tab]