Example of Tabs with Manual Activation

About This Example

The below example section demonstrates a tabs widget that implements the Tabs Pattern. In this example, a panel is displayed when users activate its tab with either Space, Enter, or a mouse click. So, for keyboard users, activating a tab requires two steps: 1) focus the tab, and 2) activate the tab. This two-step process is referred to as manual activation. Manual activation of tabs is recommended unless panels can be displayed instantly, i.e., all the panel content is present in the DOM. For additional guidance, see Deciding When to Make Selection Automatically Follow Focus.

Similar examples include:

Example

Danish Composers

Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. Maria Theresia composed music for several ballets, operas, and plays of the royal theatre. She was given good critic as a composer and described as a “virkelig Tonekunstnerinde” ('a True Artist of Music').

Accessibility Features

Keyboard Support

Key Function
Tab
  • When focus moves into the tab list, places focus on the active tab element.
  • When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the a element in tabpanel.
Enter
Space
When a tab has focus, activates the tab, causing its associated panel to be displayed.
Right Arrow When a tab has focus:
  • Moves focus to the next tab.
  • If focus is on the last tab, moves focus to the first tab.
Left Arrow When a tab has focus:
  • Moves focus to the previous tab.
  • If focus is on the first tab, moves focus to the last tab.
Home When a tab has focus, moves focus to the first tab.
End When a tab has focus, moves focus to the last tab.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
tablist div Indicates that the element serves as a container for a set of tabs.
aria-labelledby="ID_REFERENCE" div Provides a label that describes the purpose of the set of tabs.
tab button
  • Indicates the element serves as a tab control.
  • Provides a title for its associated tabpanel.
aria-selected="true" button
  • Indicates the tab control is activated and its associated panel is displayed.
  • Set when a user activates a tab.
  • Does not change when focus moves in the tablist.
aria-selected="false" button
  • Indicates the tab control is not active and its associated panel is NOT displayed.
  • Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel.
tabindex="-1" button
  • Removes the element from the page Tab sequence.
  • Set when a tab is not selected so that only the selected (active) tab is in the page Tab sequence.
  • Since an HTML button element is used for the tab, it is not necessary to set tabindex="0" on the selected (active) tab element.
  • This approach to managing focus is described in the section on Managing Focus Within Components Using a Roving tabindex.
aria-controls="ID_REFERENCE" button Refers to the tabpanel element associated with the tab.
tabpanel div
  • Indicates the element serves as a container for tab panel content.
  • Is hidden unless its associated tab control is activated.
aria-labelledby="ID_REFERENCE" div
  • Refers to the tab element that controls the panel.
  • Provides an accessible name for the tab panel.

JavaScript and CSS Source Code

HTML Source Code