Tabs

Lab component

Also known as

Tab, Tabstrip, Tab bar, Tab set

TabsNext switch between different but related content. Users can move between different views without the need to leave the current page. A tabstrip comprises a minimum of two tabs, with one tab actively engaged at any given moment. The active tab is differentiated from an inactive tab by a colored indicator either on the top or bottom edge of the tab, depending on the variant in use. These tabstrips can expand the full width of the page or be used within content areas, or within components such as dialogs, cards, and drawers.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Any focusable elements included in the tab content will need to be checked and tested accordingly.

This aXe issue is flagged when tabindex="-1" is applied to the overflow menu, which is technically a scrollable region. This implementation was added to prevent an additional, unnecessary tab stop in the navigation flow due to new browser enhancements that automatically apply focus to scrollable regions. While the menu itself is not focusable, its contents remain accessible via arrow key navigation when revealed.

This aXe issue is flagged in two scenarios:

  1. When an overflow menu is present within the tab list, where tabindex="-1" is applied to prevent focus, due to new browser enhancements, ensuring users don't encounter an additional tab stop when navigating away from the tab list

  2. When using nested action buttons within tabs. This example follows the W3C's experimental "Tabs with Action Buttons" example and maintains expected keyboard and screen reader interaction patterns

This aXe issue is flagged due to the use of aria-actions, which is currently in draft status for the upcoming WAI-ARIA 1.3 release. However:

  • The implementation follows the W3C's experimental "Tabs with Action Buttons" example and maintains expected keyboard and screen reader interaction patterns
  • Screen readers properly announce and interact with the actions

We anticipate when the release is published and aria actions is officially supported that this will no longer be a defect. We will confirm and update this guidance after the release.

  • VoiceOver users receive inaccurate tab position information when navigating the overflow menu as it's treated as a separate tab list
  • In addition, when selecting a tab in the overflow menu, that tab is visually repositioned before the tab list to ensure visibility. Due to these position issues, the following announcement is provided to screen reader users: "Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected"

Digital accessibility guidance continues to evolve as new design patterns and component challenges emerge. While we have worked to align with existing guidelines, some complex interactions and modern UI patterns present unique accessibility challenges that current guidelines may not fully address. We have implemented solutions that we believe create the most understandable and accessible experience possible, even when they conflict with current automated testing tools.

We welcome feedback and alternative approaches to addressing any of these accessibility considerations. If you have suggestions for improving these components, please reach out to us as we are committed to continuous accessibility improvement of our user experiences.

KeyFunction
Tab
  • If focus is on outside of tabs, Tab enters focus into tabs.
  • If focus is on a tab item, Tab exits the tab component and place focus onto the next element within the tabbing order.
Shift + Tab
  • If focus is inside a tab component, this action moves focus to the previous element in the tabbing order.
Enter / Space
  • If focus is on tab hover state, this action selects a tab item.
Left arrow / Right arrow
  • This action moves focus between tab items in tab bar.
Up arrow / Down arrow
  • This action moves focus between tab items in an overflow menu list.
Home
  • If focus is on a tab, Home moves focus to the first tab.
End
  • If focus is on a tab, End moves focus to the last tab.