Example of Tabs with Manual 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.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

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 of Tabs with Automatic Activation: A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.

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').

Carl Joachim Andersen (29 April 1847 – 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. Both as a virtuoso and as composer of flute music, he is considered one of the best of his time. He was considered to be a tough leader and teacher and demanded as such a lot from his orchestras but through that style he reached a high level.

Ida Henriette da Fonseca (July 27, 1802 – July 6, 1858) was a Danish opera singer and composer. Ida Henriette da Fonseca was the daughter of Abraham da Fonseca (1776–1849) and Marie Sofie Kiærskou (1784–1863). She and her sister Emilie da Fonseca were students of Giuseppe Siboni, choir master of the Opera in Copenhagen. She was given a place at the royal Opera alongside her sister the same year she debuted in 1827.

Peter Erasmus Lange-Müller (1 December 1850 – 26 February 1926) was a Danish composer and pianist. His compositional style was influenced by Danish folk music and by the work of Robert Schumann; Johannes Brahms; and his Danish countrymen, including J.P.E. Hartmann.

Accessibility Features

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.
Note that since the first element in every tabpanel is a focusable element (i.e., a link), the tabpanel is not included in the page Tab sequence. To make it easy for screen reader users to navigate from a tab to the beginning of content in the active tabpanel, 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 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 `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

CSS: tabs.css
Javascript: tabs-manual.js

HTML Source Code

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