tabpanel is a container for the resources of layered content associated with a
tabpanel is part of a tab interface, a common user experience pattern in which a group of visual tabs allow for quickly switching between multiple layered views. Each tab is defined as such with the
tab role, and these tabs are contained within an element with the
tablist role. The
tablist is often visually positioned above or to the side of a content area, containing the associated tabpanels. The
tabpanel is the role of the container for each pane of content that is associated with a corresponding
tab in the tab interface's
In many tab interfaces, only a single
tabpanel will be visible at a time. However, some interfaces may require multiple tab panels to be displayed at once. In these cases the
tablist would be provided the
aria-multiselectable attribute, and the
tab elements would then use the
aria-expanded attribute to indicate whether its associated
tabpanel was visible or not. The tab's selected state would instead be used to indicate which tabpanel is the currently 'active' panel. For example, this could indicate which tabpanel keyboard focus would move to if someone were to press the tab key when focused on an tab within the multi-select
In single-select tab interfaces, only the
tabpanel associated with the currently selected tab is displayed. All other
tabpanel elements associated with the unselected tabs must be hidden from users. So when tab selection changes, the displayed tabpanel would also, while the previously-displayed tabpanel would then become hidden.
In multi-select tab interfaces, multiple
tabpanel elements may be displayed, matching the expanded state of their associated
Tabs do not act as anchor links to individual panels — and upon activation, keyboard focus should remain on the current
tab element and not automatically move to the newly displayed
href attribute, as this would have the added benefit of removing the hyperlink-specific menu items from the element's browser context menu.
When keyboard focus is on a
tablist, or a
tab within the
tablist, the Tab key should be programmed to move from the focused tab — which may or may not be the selected tab — to the
tabpanel which represents the currently selected tab.
tab in a
tablist can serve as the label for its corresponding
tabpanel. Include the
id of each
tab as the value for each
When a tabbed interface is initialized, one
tabpanel is displayed and its associated
tab is styled to indicate that it is active, reflecting its programmatic state. All inactive
tabpanel elements must be hidden to all users. This is most commonly achieved by use of CSS's
See the ARIA
tab role article for more information specific to the use of this role.
tabindex="-1" to allow a
tabpanel to receive focus without including the
tabpanel in the page's keyboard focus order.
Make sure to define styles for a
tabpanel for when it receives focus, optimally using the CSS
:focus pseudo-class, so keyboard users know there was a change in focus and are aware of what content currently has focus.
Carousels can be created using this tab pattern: A slide picker controls can be marked up as
tabs in a
tablist with the slide represented by a
|Accessible Rich Internet Applications (WAI-ARIA) |
|ARIA Authoring Practices |