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

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.

  1. Accessible ARIA Tabs.
  2. Awesome Accessible Tabpanel.
  3. Example of Tabs with Automatic Activation.
  4. jQuery Accessible tab panel system, using ARIA.
  5. Responsive Tabs to Accordion.
  6. Tabbed Interfaces.
  7. Tab Panel.
  8. Tab Panel: ARIA CSS Selectors.
  9. Tabpanel Widget.
  10. Tabs (jQuery UI).

Comments

Add a comment

Required fields are marked *.

Back to top