The ARIAtabpanel is a container for the resources of layered content associated with atab.

Description

Thetabpanel role indicates the element is a container for the resources associated with atab role, where eachtab is contained in atablist.

Atabpanel 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 thetab role, and these tabs are contained within an element with thetablist role. Thetablist is often visually positioned above or to the side of a content area, containing the associated tabpanels. Thetabpanel is the role of the container for each pane of content that is associated with a correspondingtab in the tab interface'stablist.

In many tab interfaces, only a singletabpanel will be visible at a time. However, some interfaces may require multiple tab panels to be displayed at once. In these cases thetablist would be provided thearia-multiselectable attribute, and thetab elements would then use thearia-expanded attribute to indicate whether its associatedtabpanel 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 thetab key when focused on a tab within the multi-selecttablist.

In single-select tab interfaces, only thetabpanel associated with the currently selected tab is displayed. All othertabpanel 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, multipletabpanel elements may be displayed, matching the expanded state of their associatedtab elements.

Tabs do not act as anchor links to individual panels — and upon activation, keyboard focus should remain on the currenttab element and not automatically move to the newly displayedtabpanel. 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 thehref 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 atablist, or atab within thetablist, theTab key should be programmed to move from the focused tab — which may or may not be the selected tab — to thetabpanel which represents the currently selected tab.

Eachtab in atablist can serve as the label for its correspondingtabpanel. Include theid of eachtab as the value for eachtabpanel'saria-labelledby attribute.

You can also optionally associate eachtabpanel with its associatedtab by including theid of thetabpanel as the value of thetab'saria-controls attribute.

When a tabbed interface is initialized, onetabpanel is displayed and its associatedtab is styled to indicate that it is active, reflecting its programmatic state. All inactivetabpanel elements must be hidden to all users. This is most commonly achieved by use of CSS'sdisplay: none.

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

Includetabindex="-1" to allow atabpanel to receive focus without including thetabpanel in the page's keyboard focus order.

Make sure to define styles for atabpanel 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 astabs in atablist with the slide represented by atabpanel element.

Associated Roles and Attributes

tab role

Controls the visibility of the associatedtabpanel

tablist role

Group oftab elements.

aria-labelledby

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

aria-expanded

Should be used on the necessarytab elements if a multi-selectabletablist is used.

Keyboard interactions

See thetablist keyboard interactions in thetablist role definition.

Example

See thetabpanel,tab, andtablist example in thetab role definition.

Specifications

See also

• ARIAtab role
• ARIAtablist role
• Example: Tabs with Automatic Activation - W3C
• Example: Tabs with Manual Activation -W3C