ARIA: tabpanel role

The tabpanel role indicates the element is a container for the resources associated with a tab role, where each tab is contained in a tablist.

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 tablist.

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 tablist.

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 tab elements.

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 tabpanel. While a tab interface may be progressively enhanced based off an underlying markup pattern of in-page hyperlinks pointing to their associated sections of content, when JavaScript is used to modify these elements into a tabbed interface, the hyperlinks' default behavior should be prevented. Ideally, this could be done by removing or modifying the 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.

Each tab in a tablist can serve as the label for its corresponding tabpanel. Include the id of each tab as the value for each tabpanel's aria-labelledby attribute.

You can also optionally associate each tabpanel with its associated tab by including the id of the tabpanel as the value of the tab's aria-controls attribute.

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 display: none.

See the ARIA tab role article for more information specific to the use of this role.

Include 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 tabpanel element.

tab role

Controls the visibility of the associated tabpanel

tablist role

Group of tab elements.

aria-labelledby

Provides an accessible name. References the tab element that controls the panel

aria-expanded

Should be used on the necessary tab elements if a multi-selectable tablist is used.

See the tablist keyboard interactions in the tablist role definition.

See the tabpanel, tab, and tablist example in the tab role definition.

• ARIA tab role
• ARIA tablist role
• Example: Tabs with Automatic Activation - W3C
• Example: Tabs with Manual Activation -W3C