


So when tab selection changes, the displayed tabpanel would also, while the previously-displayed tabpanel would then become hidden. All other tabpanel elements associated with the unselected tabs must be hidden from users. In single-select tab interfaces, only the tabpanel associated with the currently selected tab is displayed. 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. The tab's selected state would instead be used to indicate which tabpanel is the currently 'active' panel.

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. However, some interfaces may require multiple tab panels to be displayed at once. In many tab interfaces, only a single tabpanel will be visible at a time. 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. The tablist is often visually positioned above or to the side of a content area, containing the associated tabpanels. Each tab is defined as such with the tab role, and these tabs are contained within an element with the tablist 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.Ī 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.
