Tabs

Tabs organise content into multiple panels, of which only one is visible at a time. Users switch between panels by selecting the corresponding tab.

Tabs can be used when content can be grouped into clearly named, parallel categories that the user does not need to view at the same time. They are less suitable when the content sections need to be compared, scanned together, or printed as a whole.

Accessibility Features

  • role="tablist" identifies a group of tabs.
  • role="tab" identifies a single tab, and aria-selected communicates its selected state to screen readers.
  • role="tabpanel" identifies a content panel, and aria-labelledby associates it with its corresponding tab.
  • Only the selected tab receives focus when pressing Tab, all others have tabindex="-1".
  • Left Arrow and Right Arrow move focus between tabs. Tabs can activate immediately on focus, or require the user to confirm with Enter or Space.
  • If the tab list is long, it must scale to mobile screens without overflowing. One way to achieve this is by allowing the tabs to wrap onto multiple rows.
  • aria-label provides a unique label for the tablist.
  • aria-controls on a tab points to the panel it controls.

Example

Code Snippet