Skip to content

Example of Tabs with Automatic Activation

Example of Tabs with Automatic Activation

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

About This Example

This example section demonstrates a tabs widget that implements the Tabs Pattern. In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus. It is recommended that authors consider implementing automatic activation of tabs only in circumstances where panels can be displayed instantly, i.e., all 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

  • To make it easy for screen reader users to navigate from a tab to the beginning of content in the active tabpanel, the tabpanel element has tabindex="0" to include the panel in the page Tab sequence. It is recommended that all tabpanel elements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable.
  • To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
    • The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have 1 pixel borders. The active tab is also 4 pixels higher than the inactive tabs.
    • The focus ring is drawn with a CSS border on a child span element of the tab element. This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed.
    • Because transparent borders are visible on some systems when high contrast settings are enabled, only the focused span element has a visible border. When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
  • To ensure the tab content remains visible when the screen is magnified, the width of the tabs and tab panels are defined using a percentage of the screen width. As the page is magnified the height of the tab increases and the tab content re-flows to the new dimensions of the tab.

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 tabpanel element.
Right Arrow
  • Moves focus to the next tab.
  • If focus is on the last tab, moves focus to the first tab.
  • Activates the newly focused tab.
Left Arrow
  • Moves focus to the previous tab.
  • If focus is on the first tab, moves focus to the last tab.
  • Activates the newly focused tab.
Home Moves focus to the first tab and activates it.
End Moves focus to the last tab and activates it.

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.
  • When focused, it is automatically activated, causing its associated tabpanel to be displayed.
  • Provides a label for its associated tabpanel.
aria-selected="true" button
  • Indicates the tab is selected and its associated tabpanel is displayed.
  • Set when a tab receives focus.
aria-selected="false" button
  • Indicates the tab is not selected and its associated tabpanel is NOT displayed.
  • Set for all tab elements in the tab set except the tab that is selected.
tabindex="-1" button
  • Removes the element from the page Tab sequence.
  • Set when a tab is not selected so that only the selected 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 element with role=tabpanel 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.
tabindex="0" div
  • Puts the tabpanel in the page Tab sequence.
  • Facilitates navigation to panel content for assistive technology users.
  • Focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable.

JavaScript and CSS Source Code

HTML Source Code

To copy the following HTML code, please open it in CodePen.

Back to Top