ARIA: tabpanel role

The ARIA tabpanel is a container for the resources of layered content associated with a tab.

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 the a tab interface, a common user experience pattern in which a group of visual tabs each enable quick switching between multiple layered views. Each tab is defined as such with the tab role. The tablist role is used on the container grouping the selectable tabs. The tablist is usually above or to the side of a content area. The tabpanel role is the role of the container of every pane of content that is made visible by selecting a tab. Only one tabpanel is visible at a time.

Only the tabpanel associated with the currently selected tab is displayed. The other tabpanel elements, the ones associated with the unselected tabs are hidden.

Selecting a different tab changes the currently visible tab panel. The content area changes by making visible a new panel while hiding the previously visible panel and making the newly selected tab more prominent than the other tabs. User focus, however, does not change on tab selection.

Tabs do not act as anchor links to individual panels. While semantic HTML may be coded with the tabs being anchor links navigating to the tab's associated tabpanel, when JavaScript is used to progressively enhance the content to a tabbed interface, the link's default behavior should be prevented.

In a tab interface, selecting a tab makes the associated tabpanel visible but does not move user focus. Tab selection only reveals the content of the associated panel visually and unhides them from assistive technologies. The Tab key should be programmed to move from the focused tab to the tab's associated tabpanel.

Each tab in a tablist serves as the label for one of the tab panels and can be activated to display that panel. Include the id of each tab as the value of 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. Hide the non-visible tabpanels with the HTML hidden attribute or set aria-hidden="true". Browsers won't render elements with the hidden attribute set, so long as CSS is declared on a hidden attribute selector to remove it.

If using aria-hidden, use CSS to hide the hidden tab panels. When a new tab is selected, remove the hidden attribute from the newly active panel or set the aria-hidden attribute to false, while adding hidden or aria-hidden="true" to the previously active tabpanel.

The newly selected tab is considered "active" and should have its [aria-selected](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) attribute set totruewhile all other tabs in the sametablistshould have thearia-selectedattribute set tofalse, or removed altogether. See [ARIAtab` role](/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role) for move information.

If the tablist precedes the tabpanel in source order, the user will expect to be able to step through the remaining tabs in focus order or select the down arrow to give focus to the visible tabpanel when navigating by keyboard.

Include tabindex="-1" on enable a tabpanel to receive focus without putting the tabpanel in the page Tab focus sequence for keyboard users.

Make sure to include focus styles for the tabpanel that has focus, optimally using the CSS :focus pseudoclass, 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-hidden

Indicates whether an element is exposed to the accessibility API.

HTML hidden attribute

Indicates an element is not currently relevant and browsers won't render it.

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
• Example: Codepen of tab interface - Heydon Pickering