Tab panels

Summary

• Principle.
• Core HTML base.
• ARIA roles, states and properties.
• Keyboard interaction.
• Note.

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.

Core HTML base

<div role="tablist" aria-label="[Component title]">
  <button role="tab" id="tab-1" tabindex="-1" aria-selected="false" aria-controls="panel-1">Tab 1</button>
  <button role="tab" id="tab-2" aria-selected="true" aria-controls="panel-2">Tab 2</button>
  <button role="tab" id="tab-3" tabindex="-1" aria-selected="false" aria-controls="panel-3">Tab 3</button>
  <button role="tab" id="tab-4" tabindex="-1" aria-selected="false" aria-controls="panel-4">Tab 4</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1" tabindex="0">
  [Content of the first panel (hidden)]
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" tabindex="0">
  [Content of the second panel (displayed, because the associated tab is selected)]
</div>
<div role="tabpanel" id="panel-3" aria-labelledby="tab-3" tabindex="0">
  [Content of the third panel (hidden)]
</div>
<div role="tabpanel" id="panel-4" aria-labelledby="tab-4" tabindex="0">
  [Content of the fourth panel (hidden)]
</div>

ARIA roles, states and properties

• The attributes role="tablist" and aria-label="[Component title]" must be applied to the element that encloses the tabs. If the component is already introduced by a visible title, replace the aria-label attribute with an aria-labelledby="[id attribute value to be added to the component title]" attribute.

  If the tabs are oriented vertically, the aria-orientation="vertical" attribute must also be applied.

• role="tab" must be placed on each tab.
• role="tabpanel" must be placed on each tab panel.
• The tabindex="0" attribute must be applied to each panel.
• Each tab must be associated with its panel via the aria-controls attribute:
  • Each panel must have an id attribute set to a unique value.
  • Each tab must have the aria-controls attribute set to the value of the id attribute of the associated panel.
• Each panel must be associated with the tab that controls it via the aria-labelledby attribute:
  • Each tab must have an id attribute set to a unique value.
  • Each panel must have an aria-labelledby attribute set to the value of the id attribute of the tab that controls it.
• The aria-selected attribute must be applied to each tab. Its value must 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="-1" attribute must be placed on each non-selected tab. It must be set dynamically according to the state of the associated tab.

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, pressing the Tab key leaves the group of tabs and the focus is placed on the displayed panel.

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.

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.

Comments

Updates

Back to top