Tab panels
Summary
- Principle.
- Core HTML base.
- ARIA roles, states and properties.
- Keyboard interaction.
- Note.
- Examples of components.
Principle

Tab panels are dynamic modules that optimize visible space on a web page, through a system of elements which control whether panels are visible or hidden.
They usually appear as a list of items placed next to the selected tab, designed to display content that relates to it. Only one tab can be activated at the time.
This code is based on the “Tabs” design pattern found in the WAI-ARIA 1.1 Authoring Practices of the W3C.
Core HTML base
ARIA roles, states and properties
role="tablist"
should be placed on the element which encapsulates the tabbed interface component.If the tabs are oriented vertically, the
aria-orientation="vertical"
attribute should also be applied.role="tab"
should be placed on each tab.role="tabpanel"
should be placed on each tab panel.- Each tab should be associated with its panel via the
aria-controls
attribute:- Each panel should have an
id
attribute set to a unique value. - Each tab should have the
aria-controls
attribute set to the value of theid
attribute of the associated panel.
- Each panel should have an
- Each panel should be associated with the tab that controls it via the
aria-labelledby
attribute:- Each tab should have an
id
attribute set to a unique value. - Each panel should have an
aria-labelledby
attribute set to the value of theid
attribute of the tab that controls it.
- Each tab should have an
- The
aria-selected
attribute should be applied to each tab. Its value should be set dynamically according to the state of the associated tab:aria-selected="true"
on the selected tab.aria-selected="false"
on the other tabs, which have not been selected.
- The
tabindex
attribute should be placed on each tab. Its value should be set dynamically according to the state of the associated tab:tabindex="0"
on the selected tab.tabindex="-1"
on the other tabs, which have not been selected.
Keyboard interaction
Tab and Shift + Tab
When the user tabs into the tabbed interface component, the Tab key places the focus on the selected tab in the group. When the focus is on a tab, the next time the Tab key is pressed, the user leaves the tabbed interface component. Shift + Tab has the same behavior as the Tab key, except in the reverse order.
Left arrow
When the focus is on a tab, this key moves the keyboard focus to the previous tab in the tabbed interface component and selects this tab. If the keyboard focus is on the first tab in the group, this key moves the keyboard focus to the last tab in the group and selects it.
If the tabs are oriented vertically, the Up arrow should also have this behavior.
Right arrow
When the focus is on a tab, this key moves the keyboard focus to the next tab in the tabbed interface component and selects this tab. If the keyboard focus is on the last tab in the group, this key will move keyboard focus to the first tab in the group and selects it.
If the tabs are oriented vertically, the Down arrow should also have this behavior.
Note
Panels not displayed should be hidden with display: none
and/or visibility: hidden
.
Examples of components
The following components are proposed here because their level of accessibility is considered good or very good.
However, before using them in your project, it is important to check that the specifications presented above have been respected. Depending on the version used, the components may need some adjustments before they can be used in your project.