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.

Core HTML base

<ul role="tablist">
  <li role="tab" id="tab-1" tabindex="-1" aria-selected="false" aria-controls="panel-1">Tab 1</li>
  <li role="tab" id="tab-2" tabindex="0" aria-selected="true" aria-controls="panel-2"> Tab 2</li>
  <li role="tab" id="tab-3" tabindex="-1" aria-selected="false" aria-controls="panel-3"> Tab 3</li>
  <li role="tab" id="tab-4" tabindex="-1" aria-selected="false" aria-controls="panel-4"> Tab 4</li>
</ul>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  [Content of first panel (hidden)]
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2">
  [Content of second panel (showing, because the associated tab is selected)]
</div>
<div role="tabpanel" id="panel-3" aria-labelledby="tab-3">
  [Content of third panel (hidden)]
</div>
<div role="tabpanel" id="panel-4" aria-labelledby="tab-4">
  [Content of forth panel (hidden)]
</div>

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 the id attribute of the associated panel.
• 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 the id attribute of the tab that controls it.
• 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.

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.

Note

Panels not displayed should be hidden with display: none and/or visibility: hidden.

Examples of components

Comments

Back to top