Accessibility

Tabs

The Tabs component has been designed with accessibility in mind.

Accessibility props

The following props are available to improve the accessibility of your Tabs component:

TabList

Prop	Type	Description
ariaLabel	`string`	Allows you to provide an accessible label for the set of tabs.
ariaLabelledby	`string`	References the ID of an element that labels the set of tabs.

The ariaLabel prop should ideally be translated and descriptive of the purpose of the tab set. It should clearly communicate the type of content users will find within the tabs.

The ariaLabelledby prop is used when you already have a visible heading that describes the tab set, allowing you to reuse that text for screen readers.

Tab

Prop	Type	Description
disabled	`boolean`	Indicates that the tab is not interactive and cannot be activated.

Accessibility implementation

The Tabs component automatically implements proper accessibility features including:

Correct ARIA roles: tablist for the TabList, tab for individual tabs, and tabpanel for tab panels
Appropriate ARIA states and relationships:
aria-selected: Indicates which tab is currently active
aria-disabled: Applied to tabs that cannot be activated
aria-controls: Applied to each tab to reference its associated panel
aria-labelledby: Applied to each panel to reference its associated tab (this is different from the ariaLabelledby prop on TabList)

Best practices

Use the ariaLabel or ariaLabelledby props on the TabList component to provide a descriptive label for the set of tabs, especially when there are multiple tab sets on a page.
Ensure that tab labels are clear and descriptive of the content they control.
When a tab is disabled, use the disabled prop to properly communicate this state to assistive technologies.
Always translate accessibility-related strings to match the user’s language.

Code examples

Using ariaLabel

<Tabs>
  <TabList ariaLabel="Content sections">
    <Tab>Section 1</Tab>
    <Tab>Section 2</Tab>
    <Tab disabled>Section 3</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Content for section 1</TabPanel>
    <TabPanel>Content for section 2</TabPanel>
    <TabPanel>Content for section 3</TabPanel>
  </TabPanels>
</Tabs>

In this example, screen readers would announce “Content sections, tab group” when focusing on the tab list.

Using ariaLabelledby

<div>
  <h2 id="tabs-title">Flight Options</h2>
  <Tabs>
    <TabList ariaLabelledby="tabs-title">
      <Tab>Economy</Tab>
      <Tab>Business</Tab>
      <Tab>First Class</Tab>
    </TabList>
    <TabPanels>
      <TabPanel>Economy class options</TabPanel>
      <TabPanel>Business class options</TabPanel>
      <TabPanel>First class options</TabPanel>
    </TabPanels>
  </Tabs>
</div>

In this example, screen readers would announce “Flight Options, tab group” when focusing on the tab list.