Experimental Example of Tabs with Action Buttons

Read This First

Experimental content! Do not use except for new standards development purposes. Please read below to understand why.

This is an experimental implementation of potential future techniques that may not yet be supported by web standards.

This example may include ARIA, HTML, CSS, or other code that is not yet included in a final web standard specification.
Experimental content is published in the APG only to facilitate discussion, gather feedback, and support testing of new features in browsers and assistive technologies.
There may be little or no support for this example in any or most browser and assistive technology combinations.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.

About This Experimental Example

This is an experimental implementation of the draft specification of the aria-actions attribute. The aria-actions property enables an element to reference another interactive element that can be activated to perform an action on the referencing element. In this example, each tab element references a menu button that opens a menu of actions that apply to the referencing tab. The relationship provided by aria-actions enables an assistive technology to both communicate the availability of the action button and provide a command for activating the button while focus is on the tab.

The below example 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.

This example also demonstrates how to provide buttons that provide contextual actions for the tab. Each tab has an associated context actions menu button. The menu button is referenced by aria-actions, which enables it to be activated by an assistive technology user while focus is on the tab.

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

Experimental Example

Interesting Sharks

The nurse shark (Ginglymostoma cirratum) is an elasmobranch fish in the family Ginglymostomatidae. The conservation status of the nurse shark is globally assessed as Vulnerable in the IUCN List of Threatened Species. They are considered to be a species of least concern in the United States and in The Bahamas, but considered to be near threatened in the western Atlantic Ocean because of their vulnerable status in South America and reported threats throughout many areas of Central America and the Caribbean. They are directly targeted in some fisheries and considered by-catch in others.

The basking shark (Cetorhinus maximus) is the second-largest living shark and fish, after the whale shark. It is one of three plankton-eating shark species, along with the whale shark and megamouth shark. Typically, basking sharks reach 7.9 m (26 ft) in length. It is usually greyish-brown, with mottled skin, with the inside of the mouth being white in colour. The caudal fin has a strong lateral keel and a crescent shape. Other common names include bone shark, elephant shark, sailfish, and sunfish. In Orkney, it is called hoe-mother (contracted homer), meaning "the mother of the picked dogfish".

The whale shark (Rhincodon typus) is a slow-moving, filter-feeding carpet shark and the largest known extant fish species. The largest confirmed individual had a length of 18.8 m (61.7 ft). The whale shark holds many records for size in the animal kingdom, most notably being by far the most massive living non-cetacean animal. It is the sole member of the genus Rhincodon and the only extant member of the family Rhincodontidae, which belongs to the subclass Elasmobranchii in the class Chondrichthyes. Before 1984 it was classified as Rhiniodon into Rhinodontidae.

The goblin shark (Mitsukurina owstoni) is a rare species of deep-sea shark. Sometimes called a "living fossil", it is the only extant representative of the family Mitsukurinidae, a lineage some 125 million years old. This pink-skinned animal has a distinctive profile with an elongated, flat snout, and highly protrusible jaws containing prominent nail-like teeth. It is usually between 3 and 4 m (10 and 13 ft) long when mature, though it can grow considerably larger such as one captured in 2000 that is thought to have measured 6 m (20 ft). Goblin sharks are benthopelagic creatures that inhabit upper continental slopes, submarine canyons, and seamounts throughout the world at depths greater than 100 m (330 ft), with adults found deeper than juveniles. Some researchers believe that these sharks could also dive to depths of up to 1,300 m (4,270 ft), for short periods of time.

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

Tabs

Key	Function
`Tab`	When focus moves into the `tablist`, places focus on the active `tab`. When focus is on a `tab`, places focus on its associated menu `button`. When focus is on the menu `button` associated with a `tab`, moves focus to one of the following depending on which is nearest in the forward tab sequence: The active `tab`. The first focusable element following the `tablist`. In this example, that is the `a` element in `tabpanel`.
`Shift` + `Tab`	When focus moves into the `tablist`, places focus on the menu `button` associated with the active `tab`. When focus is on the menu `button` associated with a `tab`, places focus on that `tab`. When focus is on a `tab`, moves focus to one of the following depending on which is nearest in the backward tab sequence: The active `tab`. The first focusable element preceding the `tablist`.
`Enter` `Space`	When a tab has focus, activates the tab, causing its associated panel to be displayed.
`Right Arrow`	When a `tab` or its associated menu button have 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` or its associated menu button have 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`.

Menu Button

Keyboard support for each tab’s associated menu button is documented in Menu Button Pattern.

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.
	`aria-actions="ID_REFERENCE"`	`button`	Refers to the context actions menu `button` 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

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


<div class="tabs">
  <h3 id="tablist-1">
    Interesting Sharks
  </h3>
  <div role="tablist"
       aria-labelledby="tablist-1"
       class="manual">
    <div class="tab-wrapper">
      <button id="tab-1"
              type="button"
              role="tab"
              aria-selected="true"
              aria-controls="tabpanel-1"
              aria-actions="tab-1-action">
        <span class="focus">
          Nurse shark
        </span>
      </button>
      <div class="menu-button-actions">
        <button type="button"
                id="tab-1-action"
                tabindex="-1"
                aria-label="Actions for Nurse shark tab"
                aria-haspopup="true"
                aria-expanded="false"
                aria-controls="menu1">
          <svg aria-hidden="true"
               width="16"
               height="16"
               viewBox="0 0 16 16"
               fill="none"
               xmlns="http://www.w3.org/2000/svg">
            <circle cx="8"
                    cy="13"
                    r="2"
                    fill="black"></circle>
            <circle cx="8"
                    cy="3"
                    r="2"
                    fill="black"></circle>
            <circle cx="8"
                    cy="8"
                    r="2"
                    fill="black"></circle>
          </svg>
        </button>
        <ul id="menu1"
            role="menu"
            aria-labelledby="tab-1-action">
          <li role="menuitem"
              data-action="tab-1-action"
              data-operation="move-forward">
            Move tab forward
          </li>
          <li role="menuitem"
              data-action="tab-1-action"
              data-operation="move-backward">
            Move tab backward
          </li>
          <li role="menuitem"
              data-action="tab-1-action"
              data-operation="clipboard-copy">
            Copy tab contents to clipboard
          </li>
          <li role="menuitem"
              data-action="tab-1-action"
              data-operation="close">
            Close tab
          </li>
        </ul>
      </div>
    </div>
    <div class="tab-wrapper">
      <button id="tab-2"
              type="button"
              role="tab"
              aria-selected="false"
              aria-controls="tabpanel-2"
              tabindex="-1"
              aria-actions="tab-2-action">
        <span class="focus">
          Basking shark
        </span>
      </button>
      <div class="menu-button-actions">
        <button type="button"
                id="tab-2-action"
                tabindex="-1"
                aria-label="Actions for Basking shark tab"
                aria-haspopup="true"
                aria-expanded="false"
                aria-controls="menu2">
          <svg aria-hidden="true"
               width="16"
               height="16"
               viewBox="0 0 16 16"
               fill="none"
               xmlns="http://www.w3.org/2000/svg">
            <circle cx="8"
                    cy="13"
                    r="2"
                    fill="black"></circle>
            <circle cx="8"
                    cy="3"
                    r="2"
                    fill="black"></circle>
            <circle cx="8"
                    cy="8"
                    r="2"
                    fill="black"></circle>
          </svg>
        </button>
        <ul id="menu2"
            role="menu"
            aria-labelledby="tab-2-action">
          <li role="menuitem"
              data-action="tab-2-action"
              data-operation="move-forward">
            Move tab forward
          </li>
          <li role="menuitem"
              data-action="tab-2-action"
              data-operation="move-backward">
            Move tab backward
          </li>
          <li role="menuitem"
              data-action="tab-2-action"
              data-operation="clipboard-copy">
            Copy tab contents to clipboard
          </li>
          <li role="menuitem"
              data-action="tab-2-action"
              data-operation="close">
            Close tab
          </li>
        </ul>
      </div>
    </div>
    <div class="tab-wrapper">
      <button id="tab-3"
              type="button"
              role="tab"
              aria-selected="false"
              aria-controls="tabpanel-3"
              tabindex="-1"
              aria-actions="tab-3-action">
        <span class="focus">
          Whale shark
        </span>
      </button>
      <div class="menu-button-actions">
        <button type="button"
                id="tab-3-action"
                tabindex="-1"
                aria-label="Actions for Whale shark tab"
                aria-haspopup="true"
                aria-expanded="false"
                aria-controls="menu3">
          <svg aria-hidden="true"
               width="16"
               height="16"
               viewBox="0 0 16 16"
               fill="none"
               xmlns="http://www.w3.org/2000/svg">
            <circle cx="8"
                    cy="13"
                    r="2"
                    fill="black"></circle>
            <circle cx="8"
                    cy="3"
                    r="2"
                    fill="black"></circle>
            <circle cx="8"
                    cy="8"
                    r="2"
                    fill="black"></circle>
          </svg>
        </button>
        <ul id="menu3"
            role="menu"
            aria-labelledby="tab-3-action">
          <li role="menuitem"
              data-action="tab-3-action"
              data-operation="move-forward">
            Move tab forward
          </li>
          <li role="menuitem"
              data-action="tab-3-action"
              data-operation="move-backward">
            Move tab backward
          </li>
          <li role="menuitem"
              data-action="tab-3-action"
              data-operation="clipboard-copy">
            Copy tab contents to clipboard
          </li>
          <li role="menuitem"
              data-action="tab-3-action"
              data-operation="close">
            Close tab
          </li>
        </ul>
      </div>
    </div>
    <div class="tab-wrapper">
      <button id="tab-4"
              type="button"
              role="tab"
              aria-selected="false"
              aria-controls="tabpanel-4"
              tabindex="-1"
              aria-actions="tab-4-action">
        <span class="focus">
          Goblin shark
        </span>
      </button>
      <div class="menu-button-actions">
        <button type="button"
                id="tab-4-action"
                tabindex="-1"
                aria-label="Actions for Goblin shark tab"
                aria-haspopup="true"
                aria-expanded="false"
                aria-controls="menu4">
          <svg aria-hidden="true"
               width="16"
               height="16"
               viewBox="0 0 16 16"
               fill="none"
               xmlns="http://www.w3.org/2000/svg">
            <circle cx="8"
                    cy="13"
                    r="2"
                    fill="black"></circle>
            <circle cx="8"
                    cy="3"
                    r="2"
                    fill="black"></circle>
            <circle cx="8"
                    cy="8"
                    r="2"
                    fill="black"></circle>
          </svg>
        </button>
        <ul id="menu4"
            role="menu"
            aria-labelledby="tab-4-action">
          <li role="menuitem"
              data-action="tab-4-action"
              data-operation="move-forward">
            Move tab forward
          </li>
          <li role="menuitem"
              data-action="tab-4-action"
              data-operation="move-backward">
            Move tab backward
          </li>
          <li role="menuitem"
              data-action="tab-4-action"
              data-operation="clipboard-copy">
            Copy tab contents to clipboard
          </li>
          <li role="menuitem"
              data-action="tab-4-action"
              data-operation="close">
            Close tab
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="tabpanel-1"
       role="tabpanel"
       aria-labelledby="tab-1">
    <p>
      The
      <a href="https://en.wikipedia.org/wiki/Nurse_shark">
        nurse
        shark
      </a>
      (
      <span lang="la">
        Ginglymostoma cirratum
      </span>
      ) is an
      elasmobranch fish in the family
      <span lang="la">
        Ginglymostomatidae
      </span>
      . The conservation status of
      the nurse shark is globally assessed as Vulnerable in the IUCN
      List of Threatened Species. They are considered to be a species
      of least concern in the United States and in The Bahamas, but
      considered to be near threatened in the western Atlantic Ocean
      because of their vulnerable status in South America and reported
      threats throughout many areas of Central America and the
      Caribbean. They are directly targeted in some fisheries and
      considered by-catch in others.
    </p>
  </div>
  <div id="tabpanel-2"
       role="tabpanel"
       aria-labelledby="tab-2"
       class="is-hidden">
    <p>
      The
      <a href="https://en.wikipedia.org/wiki/Basking_shark">
        basking
        shark
      </a>
      (
      <span lang="la">
        Cetorhinus maximus
      </span>
      ) is the
      second-largest living shark and fish, after the whale shark. It
      is one of three plankton-eating shark species, along with the
      whale shark and megamouth shark. Typically, basking sharks reach
      7.9 m (26 ft) in length. It is usually greyish-brown, with
      mottled skin, with the inside of the mouth being white in
      colour. The caudal fin has a strong lateral keel and a crescent
      shape. Other common names include bone shark, elephant shark,
      sailfish, and sunfish. In Orkney, it is called hoe-mother
      (contracted homer), meaning "the mother of the picked dogfish".
    </p>
  </div>
  <div id="tabpanel-3"
       role="tabpanel"
       aria-labelledby="tab-3"
       class="is-hidden">
    <p>
      The
      <a href="https://en.wikipedia.org/wiki/Whale_shark">
        whale
        shark
      </a>
      (
      <span lang="la">
        Rhincodon typus
      </span>
      ) is a
      slow-moving, filter-feeding carpet shark and the largest known
      extant fish species. The largest confirmed individual had a
      length of 18.8 m (61.7 ft). The whale shark holds many records
      for size in the animal kingdom, most notably being by far the
      most massive living non-cetacean animal. It is the sole member
      of the genus
      <span lang="la">
        Rhincodon
      </span>
      and the only
      extant member of the family
      <span lang="la">
        Rhincodontidae
      </span>
      , which belongs to the
      subclass
      <span lang="la">
        Elasmobranchii
      </span>
      in the class
      <span lang="la">
        Chondrichthyes
      </span>
      . Before 1984 it was
      classified as
      <span lang="la">
        Rhiniodon
      </span>
      into
      <span lang="la">
        Rhinodontidae
      </span>
      .
    </p>
  </div>
  <div id="tabpanel-4"
       role="tabpanel"
       aria-labelledby="tab-4"
       class="is-hidden">
    <p>
      The
      <a href="https://en.wikipedia.org/wiki/Goblin_shark">
        goblin
        shark
      </a>
      (
      <span lang="la">
        Mitsukurina owstoni
      </span>
      ) is a rare
      species of deep-sea shark. Sometimes called a "living fossil",
      it is the only extant representative of the family
      <span lang="la">
        Mitsukurinidae
      </span>
      , a lineage some 125
      million years old. This pink-skinned animal has a distinctive
      profile with an elongated, flat snout, and highly protrusible
      jaws containing prominent nail-like teeth. It is usually between
      3 and 4 m (10 and 13 ft) long when mature, though it can grow
      considerably larger such as one captured in 2000 that is thought
      to have measured 6 m (20 ft). Goblin sharks are benthopelagic
      creatures that inhabit upper continental slopes, submarine
      canyons, and seamounts throughout the world at depths greater
      than 100 m (330 ft), with adults found deeper than juveniles.
      Some researchers believe that these sharks could also dive to
      depths of up to 1,300 m (4,270 ft), for short periods of time.
    </p>
  </div>
  <output for="tablist-1" class="action"></output>
</div>