Tablist widgets (or: tab panels, tabs)

Tablists help to split up a page's content into smaller and thus more digestible parts. Each part is minimally represented in a list of names, by which their visibility can be enabled one at a time. Tablists can be thought of as small page fragments inside a page.

Tablists are well known as native controls in many operating systems: a list of controls (usually on top of the element) allows to toggle the visibility of corresponding panels. Only a single control can be active at a time, so exactly one panel is visible and all others are hidden.

Tablist

We do not call tablists simply "tabs" so the difference to the Tab key is obvious.

General requirements

The following requirements are based on well established best practices and WAI-ARIA Authoring Practices: Tab Panel Widget.

Besides many other requirements, we want to stress out explicitly the following:

The meaning and usage of the tablist must be clear.
The state of each tab control must be perceivable ("active/inactive" or similar).
Proper feedback must be given upon activating a tab control ("active" or similar).
The tablist must be operable using both keyboard only and screen readers (with a reasonable interplay of default keys like Tab, Enter/Space, Esc, Arrow keys), as well as mobile screen readers.
The panel contents must be easily accessible using both keyboard only and screen reader.

Similarities with accordions and carousels

Maybe you never noticed that tablists, carousels, and accordions - although looking pretty distinct from each other - all solve a very similar use case: toggling the visibility of contents.

Tablists are the most basic pattern of them all. Carousels then extend it by providing additional controls like previous/next and autoplay/pause button(s). And accordions extend it by stacking all controls and panels on top of each other; in addition, some of them allow to display multiple panels at the same time.

Because of this, the following texts apply not only to tablists, but also to carousels (see Carousels (or: slideshow, slider)) and accordions (see Accordions).

Proofs of concept

Before you go on, please read What is a "Proof of concept"? (POC).

ARIA is supported pretty well for tablists (see POC #1). If you need a much simpler solution though, and according to our credo Widgets simply working for all, the easiest way to create a tablist is using a simple group of radio buttons (see POC #2).

POC #1: ARIA

TODO

Implementation details

TODO

POC #2: Radio buttons

They can be styled visually as needed using CSS, and spiced up with (very little) JavaScript, so they behave like perfect tablists.

Sensible naming of elements (and a few specifically added visually hidden texts) guarantees that screen reader users know how to handle the element - even if they have not seen any other tablist before.

Tablist with radio buttons

Show HTML code

Show CSS code

Show JS code

✔ (pass) ,

✔ (pass)

<p>
  <button>Focusable element before</button>
</p>
<div class="tablist">
  <h1 class="visually-hidden">
    flowers (tablist)
  </h1>
  <p class="visually-hidden">
    Tablist help: use the tablist controls to toggle the visibility of their respective panels (below the controls).
  </p>
  <fieldset class="controls">
    <legend class="visually-hidden">Tablist controls</legend>
    <div class="control">
      <input checked="" class="visually-hidden" id="tablist_flowers_panel_rose" name="tablist_flowers" type="radio" value="tablist_flowers_panel_rose" /><label for="tablist_flowers_panel_rose"><span class="visually-hidden">Show panel </span>rose</label>
    </div>
    <div class="control">
      <input class="visually-hidden" id="tablist_flowers_panel_tulip" name="tablist_flowers" type="radio" value="tablist_flowers_panel_tulip" /><label for="tablist_flowers_panel_tulip"><span class="visually-hidden">Show panel </span>tulip</label>
    </div>
    <div class="control">
      <input class="visually-hidden" id="tablist_flowers_panel_sunflower" name="tablist_flowers" type="radio" value="tablist_flowers_panel_sunflower" /><label for="tablist_flowers_panel_sunflower"><span class="visually-hidden">Show panel </span>sunflower</label>
    </div>
  </fieldset>
  <div class="panel" id="tablist_flowers_panel_rose_panel" style="display: block">
    <h2 class="visually-hidden">
      rose (panel)
    </h2>
    <h3>
      Some info about rose
    </h3>
    <p>
      Bla bla bla... all about rose...
    </p>
    <p>
      <img alt="A beautiful rose" src="..." />
    </p>
    <p>
      A link to a page with <a href="#">more infos about rose</a>!
    </p>
    <h3>
      More elements can come here related to rose
    </h3>
    <p>
      Maybe even some form element where you can enter a name for your rose: <input type="text" />
    </p>
  </div>
  <div class="panel" id="tablist_flowers_panel_tulip_panel" style="display: none">
    <h2 class="visually-hidden">
      tulip (panel)
    </h2>
    <h3>
      Some info about tulip
    </h3>
    <p>
      Bla bla bla... all about tulip...
    </p>
    <p>
      <img alt="A beautiful tulip" src="..." />
    </p>
    <p>
      A link to a page with <a href="#">more infos about tulip</a>!
    </p>
    <h3>
      More elements can come here related to tulip
    </h3>
    <p>
      Maybe even some form element where you can enter a name for your tulip: <input type="text" />
    </p>
  </div>
  <div class="panel" id="tablist_flowers_panel_sunflower_panel" style="display: none">
    <h2 class="visually-hidden">
      sunflower (panel)
    </h2>
    <h3>
      Some info about sunflower
    </h3>
    <p>
      Bla bla bla... all about sunflower...
    </p>
    <p>
      <img alt="A beautiful sunflower" src="..." />
    </p>
    <p>
      A link to a page with <a href="#">more infos about sunflower</a>!
    </p>
    <h3>
      More elements can come here related to sunflower
    </h3>
    <p>
      Maybe even some form element where you can enter a name for your sunflower: <input type="text" />
    </p>
  </div>
</div>
<p>
  <button>Focusable element after</button>
</p>

.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body {
  padding: 20px;
}

fieldset {
  border: 0;
  padding: 4px;
}

.tablist:focus-within .control label {
  background-color: yellow;
}

.control {
  display: inline-block;
}
.control label {
  border: 1px solid black;
  margin: 0 0 -1px 0;
  padding: 4px 10px;
}

input[type="radio"]:checked + label {
  background-color: lightyellow !important;
  border-bottom-color: lightyellow;
}

a:focus,
input:focus,
input[type="radio"]:focus + label {
  outline: 2px dotted;
  outline-offset: 2px;
}

input[type="radio"] + label:hover {
  cursor: pointer;
  text-decoration: underline;
}

.panel {
  border: 1px solid;
  background-color: lightyellow;
  padding: 0 0 0 10px;
}

;(function () {
  $(document).ready(function () {
    return $("input[type='radio']").change(function () {
      var $current_radiobutton, current_panel_id, current_radiobutton_name
      $current_radiobutton = $(this)
      current_radiobutton_name = $current_radiobutton.attr('name')
      current_panel_id = `#${$current_radiobutton.attr('value')}_panel`
      return $(`[name='${current_radiobutton_name}']`).each((i, element) => {
        var $panel, $radiobutton, panel_id
        $radiobutton = $(element)
        panel_id = `#${$radiobutton.attr('id')}_panel`
        $panel = $(panel_id)
        if (panel_id === current_panel_id) {
          return $panel.show()
        } else {
          return $panel.hide()
        }
      })
    })
  })
}).call(this)

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-5-29
NVDA 2023.1 + FF 115	✔ (pass) pass	-	2023-8-3
NVDA 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
NVDA 2023.1 + Edge	✔ (pass) pass	-	2023-7-13
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-5-22
JAWS 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
JAWS 2023.23 + Edge	✔ (pass) pass	-	2023-7-13

Implementation details

Some interesting peculiarities:

Elements are announced properly by screen readers, and it is clearly perceivable which control is active: the one with the active radio button.
Proper feedback is given upon interaction: whenever a control is activated, the screen reader announces the respective radio button's state.
Collapsed panels are hidden effectively from everybody, see Hiding elements from all devices.
Where functionality may not be obvious to screen reader users, descriptive text is given (only visible to screen readers):
- The tablist/carousel/accordion's main heading has "tablist/carousel/accordion" appended.
- A small help text explains how the tablist/carousel/accordion works.
- The controls are named "tablist/carousel/accordion controls" and are placed within a fieldset/legend structure (see Grouping form controls with fieldset and legend).
- Each control is named "Show panel X".
- Each panel's heading has "panel" appended.
The tablist/carousel/accordion controls are placed in the DOM before the panels:
- As the whole element is properly marked up with headings, screen reader users can jump very quickly between controls and panels (see How to handle headings).
Using .tablist:focus-within .control label, a style can be applied to all radio button labels upon interacting with the tablist.
- This gives users a clue that they are interacting with a single control now (indicating to use the Arrow keys instead of Tab to navigate through tab items).
- If you would rather like to make each control focusable on its own, you could use a group of checkboxes instead of radio buttons. - Do not forget to make sure only one of them is checked at a time though (using some JavaScript).

You are here:

Tablist widgets (or: tab panels, tabs)

General requirements

Similarities with accordions and carousels

Proofs of concept

POC #1: ARIA

Implementation details

POC #2: Radio buttons

Implementation details

Previous/next navigation