Tab panels

Summary

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

<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" 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

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.

If the tabs are oriented vertically, the Up arrow must 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 must also have this behavior.

Note

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

Examples of components

The ”Tabs” components  are shown here because their level of accessibility is considered good or very good.

However, before using them in your project, it is important to check for compliancy with the specifications presented above. Certain components may require some adjustments.

Comments

Add a comment

Required fields are marked *.

Back to top