The Tabs component has been designed with accessibility in mind.

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

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.

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)

The Tabs component supports keyboard navigation for accessibility:

• Tab: Moves focus to the active tab panel
• Arrow Right: Moves focus to the next tab in the list. When focus is on the last tab, it wraps to the first tab
• Arrow Left: Moves focus to the previous tab in the list. When focus is on the first tab, it wraps to the last tab
• Home: Moves focus to the first tab in the list
• End: Moves focus to the last tab in the list

All keyboard interactions consider the presence of disabled tabs, automatically skipping them when navigating.

• 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.

<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.

<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.