Example of Tabs with Automatic Activation

Important Note About Use of This Example

Note: 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.

This example section demonstrates a tabs widget that implements the design pattern for tabs. In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus. Tabs should only be automatically activated 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 of Tabs with Manual Activation: A tabs widget where users activate a tab and display its panel by pressing Space or Enter.

Example

Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.

Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.

Fear of complicated buildings:

A complex complex complex.

Accessibility Features

To demonstrate the effects of deleting a tab, the third tab, labeled Joke, can be deleted when it has focus by pressing Delete.

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.
`Delete`	When focus is on the Joke tab, removes the tab from the tab list and places focus on the previous 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-label=Entertainment`	`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, is automatically activated, causing its associated `tabpanel` to be displayed. 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 tab receives focus.
	`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 focused tab.
	`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 roving tabindex.
	`aria-controls=IDREF`	`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=IDREF`	`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 movement to panel content for assistive technology users. Especially helpful if there are panels that do not contain a focusable element.

Javascript and CSS Source Code

CSS: tabs.css
Javascript: tabs.js

HTML Source Code

<div class="tabs">
  <div role="tablist" aria-label="Entertainment">
    <button type="button"
            role="tab"
            aria-selected="true"
            aria-controls="nils-tab"
            id="nils">
      Nils Frahm
    </button>
    <button type="button"
            role="tab"
            aria-selected="false"
            aria-controls="agnes-tab"
            id="agnes"
            tabindex="-1">
      Agnes Obel
    </button>
    <button type="button"
            role="tab"
            aria-selected="false"
            aria-controls="complex-complex"
            id="complex"
            tabindex="-1"
            data-deletable="">
      Joke
    </button>
  </div>
  <div tabindex="0"
       role="tabpanel"
       id="nils-tab"
       aria-labelledby="nils">
    <p>
      Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.
    </p>
  </div>
  <div tabindex="0"
       role="tabpanel"
       id="agnes-tab"
       aria-labelledby="agnes"
       class="is-hidden">
    <p>
      Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.
    </p>
  </div>
  <div tabindex="0"
       role="tabpanel"
       id="complex-complex"
       aria-labelledby="complex"
       class="is-hidden">
    <p>
      Fear of complicated buildings:
    </p>
    <p>
      A complex complex complex.
    </p>
  </div>
</div>