Skip to content

TabPanel

What component has

Keyboard support

Keyboard support
KeyFunction
TabWhen focus moves into the tab list, the active tab element gets the focus. When the tab list contains the focus, Tab moves focus to the next element in the Tab sequence, which is the tabpanel element.
Left Arrow , Right ArrowChanges the state of next/previous tab element in the group to active. If focus is on the last/first tab, arrows move focus to the first/last tab respectively.
Space/EnterActivates focused tab element. Works only when TabPanel has default behavior='manual'.

Considerations for developers

  • Be mindful of using tabs, as they are less discoverable by design.
  • Once a tab button is focused, other tabs can be selected with the arrow keys.
  • A tab's contents can be accessed via Tab (if there are focusable elements in the tab well) or PgDn (if there are no focusable elements in the tab well).
  • Be sure to update the values of the aria-posinset and aria-setsize attributes if you have more than three tabs.

Find live examples in the A11y style guide.

Roles & attributes

The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in your interfaces.

Roles and attributes
RoleAttributeElementUsage
tablistdivIndicates that the element serves as a container for a set of tabs.
tabbuttonIndicates the element serves as a tab control. When focused, is automatically activated, causing its associated tabpanel to be displayed. Provides a title for its associated tabpanel.
aria-selected="true"buttonIndicates the tab control is activated and its associated panel is displayed. Set when a tab receives focus.
aria-selected="false"buttonIndicates the tab control isn’t active and its associated panel isn’t displayed. Set for all tab elements in the tab set except the focused tab.
tabindex="-1"buttonRemoves the element from the page Tab sequence. Set when a tab isn’t selected so that only the selected tab is in the page Tab sequence. Since an HTML button element is used for the tab, it isn’t necessary to set tabindex=0 on the selected (active) tab element. This approach to managing focus is described in the section on roving tabindex.
aria-controls="IDREF"buttonRefers to the tabpanel element associated with the tab.
tabpaneldivIndicates the element serves as a container for tab panel content. Is hidden unless its associated tab control is activated.
aria-labelledby="IDREF"divRefers to the tab element that controls the panel. Provides an accessible name for the tab panel.
tabIndex="0"divPuts the tabpanel in the page Tab sequence. Facilitates movement to panel content for assistive technology users. Especially helpful if there are panels that don’t contain a focusable element.

Resources

Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.