Tabs
Organizational element that separates content and allows users to switch views.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Note: Many of the tab components attributes and behaviors use are handled by our library. As with other form components, use IDs to associate additional instructions or error messaging so screen readers will read them. Reference Angular or React for examples.
- Add the
attribute, which refers to the , so that it appropriately refers to the tabpanel element associated with the tab. - Add
when a user activates a tab, the one associated with the currently displayed panel. - Add
for all tab elements in the tab set except the active tab. - Add
when a tab is unselected so only the selected tab is in the page Tab sequence. - Don’t set
on the selected (active) tab element. - Add the attribute
to the panel containers, as we don’t export a tab panel in our components. - Consider using
for panels that don’t contain a focusable element to make navigation easier for assistive technology users.
Keyboard controls
| Key | Behavior |
|---|---|
| Tab | Use the Tab key once to enter the tablist. Hit tab again to exit the group of tabs. |
| ↑ ↓ | Moves between the tabs when the component group is in focus in a vertical tablist. Focus loops within the tab set. When focus is on the last tab within the set, the down arrow key will move focus to the first tab. When focus is on the first tab within the set, the up arrow key will move focus to the last tab. In the automatic update approach, content below the tab should update immediately to match the focused tab. |
| → ← | Moves between the tabs when the component group is in focus in horizontal tablist. Focus loops within the tab set. When focus is on the last tab within the set, the right arrow key will move focus to the first tab. When focus is on the first tab within the set, the left arrow key will move focus to the last tab. In the automatic update approach, content below the tab should update immediately to match the focused tab. |
| Enter | When the interaction requires a manual update, the user must initiate content load with the Enter key after arrow navigation. |