Carousels (or: slideshow, slider)

Very similar to tablists, carousels also help to split up a page's content into smaller and thus more digestible parts which can be toggled visible one at a time.

Carousels are well known especially from photo galleries. They offer a list of controls (usually on top of the element) which allow 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.

Carousel

We do not call carousels "sliders" so the difference to the slider pattern (selecting a value in a min/max range) is obvious.

Before you continue, please read Tablist widgets (or: tab panels, tabs) to understand why carousels are extended variants of tablists, simply providing additional controls like previous/next buttons, and sometimes autoplay functionality.

General requirements

The following requirements are based on well established best practices; unlike most other common widget patterns, the WAI-ARIA Authoring Practices do not offer a section about carousels.

In addition to the tablists' requirements, and besides many other requirements, we want to stress out explicitly the following:

Previous/next buttons allow to toggle through available slides (optional).
Autoplay functionality toggles through available slides automatically (optional).
- Autoplay functionality must be pauseable.

Proof of concept

Based on the tablists' proof of concept, with additional controls:

Carousel with radio buttons

Show HTML code

Show CSS code

Show JS code

✔ (pass) ,

✔ (pass)

<p>
  <button>Focusable element before</button>
</p>
<div class="carousel" data-adg-carousel="my-carousel">
  <h1 class="visually-hidden">
    Flowers (carousel)
  </h1>
  <p class="visually-hidden">
    Carousel help: use the carousel controls to toggle the visibility of their respective panels (below the controls).
  </p>
  <fieldset class="controls">
    <legend class="visually-hidden">Carousel controls</legend>
    <div class="control">
      <button aria-pressed="true" data-carousel-autoplay="" data-carousel-id="carousel_flowers">Autoplay</button>
    </div>
    <div class="control">
      <button data-carousel-direction="previous" data-carousel-id="carousel_flowers">Previous</button>
    </div>
    <div class="control">
      <input checked="" class="visually-hidden" id="carousel_flowers_rose" name="carousel_flowers" type="radio" value="carousel_flowers_rose" /><label for="carousel_flowers_rose"><span class="visually-hidden">Show panel rose</span></label>
    </div>
    <div class="control">
      <input class="visually-hidden" id="carousel_flowers_tulip" name="carousel_flowers" type="radio" value="carousel_flowers_tulip" /><label for="carousel_flowers_tulip"><span class="visually-hidden">Show panel tulip</span></label>
    </div>
    <div class="control">
      <input class="visually-hidden" id="carousel_flowers_sunflower" name="carousel_flowers" type="radio" value="carousel_flowers_sunflower" /><label for="carousel_flowers_sunflower"><span class="visually-hidden">Show panel sunflower</span></label>
    </div>
    <div class="control">
      <button data-carousel-direction="next" data-carousel-id="carousel_flowers">Next</button>
    </div>
  </fieldset>
  <div class="panel" id="carousel_flowers_rose_panel" style="display: block">
    <h2>
      Rose<span class="visually-hidden"> (panel)</span>
    </h2>
    <p>
      A rose is a woody perennial flowering plant of the genus Rosa, in the family Rosaceae, or the flower it bears. There are over three hundred species and tens of thousands of cultivars.
    </p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Rosa_rubiginosa_1.jpg/259px-Rosa_rubiginosa_1.jpg" alt="Rosa rubiginosa by Stan Shebs (wikimedia.org)" height="160">
    <h3>
      Botany
    </h3>
    <p>
      The flowers of most species have five petals, with the exception of Rosa sericea, which usually has only four. Each petal is divided into two distinct lobes and is usually white or pink, though in a few species yellow or red. Beneath the petals are five sepals (or in the case of some Rosa sericea, four).
    </p>
    <p>
      Learn more: <a href="https://en.wikipedia.org/wiki/Rose" target="_blank">Rose (wikipedia.org)</a>
    </p>
    <p>
      <label for="first_input"><strong>Name your favorite rose:</strong></label>
      <input id="first_input" type="text" />
    </p>
  </div>
  <div class="panel" id="carousel_flowers_tulip_panel" style="display: none">
    <h2>
      Tulip<span class="visually-hidden"> (panel)</span>
    </h2>
    <p>
      Tulips are a genus of spring-blooming perennial herbaceous bulbiferous geophytes. The flowers are usually large, showy and brightly colored, generally red, pink, yellow, or white.
    </p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/The_Dallas_Arboretum_and_Botanical_Garden.jpg/320px-The_Dallas_Arboretum_and_Botanical_Garden.jpg" alt="Red and pink tulips by Inuyas (wikimedia.org)" height="160">
    <h3>
      Description
    </h3>
    <p>
      The tulip’s flowers are usually large and are actinomorphic (radially symmetric) and hermaphrodite (contain both male and female characteristics), generally erect, or more rarely pendulous, and are arranged more usually as a single terminal flower. In structure, the flower is generally cup or star shaped.
    </p>
    <p>
      Learn more: <a href="https://en.wikipedia.org/wiki/Tulip" target="_blank">Tulip (wikipedia.org)</a>
    </p>
    <p>
      <label for="second_input"><strong>Name your favorite tulip:</strong></label>
      <input id="second_input" type="text" />
    </p>
  </div>
  <div class="panel" id="carousel_flowers_sunflower_panel" style="display: none">
    <h2>
      Sunflower<span class="visually-hidden"> (panel)</span>
    </h2>
    <p>
      Helianthus annuus, the common sunflower, is a large annual forb of the genus Helianthus. The name sunflower may derive from the flower’s head’s shape, which resembles the sun.
    </p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Sunflower_sky_backdrop.jpg/217px-Sunflower_sky_backdrop.jpg" alt="Sunflower against a blue sky by Fir0002 (wikimedia.org)" height="160">
    <h3>
      Description
    </h3>
    <p>
      The plant has an erect rough-hairy stem, reaching typical heights of 3 metres. Sunflower leaves are broad, coarsely toothed, rough and mostly alternate. What is often called the "flower" of the sunflower is actually a "flower head" or pseudanthium of numerous small individual five-petaled flowers.
    </p>
    <p>
      Learn more: <a href="https://en.wikipedia.org/wiki/Helianthus_annuus" target="_blank">Sunflower (wikipedia.org)</a>
    </p>
    <p>
      <label for="third_input"><strong>Name your favorite sunflower:</strong></label>
      <input id="third_input" type="text" />
    </p>
  </div>
</div>
<div class="visually-hidden" id="alerts"></div>
<p>
  <button>Focusable element after</button>
</p>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

body {
  padding: 20px;
}

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

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

.carousel {
  padding-bottom: 50px;
  margin-bottom: 20px;
  position: relative;
}

.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 8px 0 10px 0;
}

.control {
  display: inline-block;
}
.control label,
.control button {
  height: 24px;
  margin: 0 8px;
  border: 1px solid black;
  background-color: lightgray;
  vertical-align: middle;
}
.control label {
  width: 24px;
  margin: 0 4px;
  border-radius: 50%;
  display: inline-block;
}

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

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

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

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

button[aria-pressed="true"] {
  font-weight: bold;
}

class AdgCarousel {
  constructor(el) {
    this.element = el
    this.directionControls = this.element.querySelectorAll(
      'button[data-carousel-direction]'
    )
    this.jumpControls = this.element.querySelectorAll('input[type=radio]')
    this.autoplayControl = this.element.querySelector(
      'button[data-carousel-autoplay]'
    )
    this.alertsContainer = document.querySelector('#alerts')
    this.alertsTimeoutId = null

    this.init()
  }

  init() {
    const changeEvent = new Event('change')
    const clickEvent = new Event('click')

    this.directionControls.forEach(button => {
      button.addEventListener('click', event => {
        const button = event.target
        const carouselId = button.getAttribute('data-carousel-id')
        const direction = button.getAttribute('data-carousel-direction')
        const allPanels = this.element.querySelectorAll(
          `input[name=${carouselId}]`
        )
        const currentIndex = Math.max(
          [...allPanels].findIndex(jumpControl => jumpControl.checked === true),
          0
        )
        const maxIndex = allPanels.length - 1
        const nextIndex =
          direction === 'previous'
            ? currentIndex < 1
              ? maxIndex
              : currentIndex - 1
            : currentIndex >= maxIndex
            ? 0
            : currentIndex + 1
        const nextPanel = allPanels[nextIndex]

        nextPanel.checked = true
        nextPanel.dispatchEvent(changeEvent)
        this.pushAlertMessage(
          `Showing panel ${nextIndex + 1} of ${maxIndex + 1}`
        )
      })
    })

    this.jumpControls.forEach(button => {
      button.addEventListener('change', event => {
        const currentRadio = event.target
        const currentRadioName = currentRadio.getAttribute('name')
        const currentPanelId = `#${currentRadio.getAttribute('value')}_panel`

        this.element
          .querySelectorAll(`[name='${currentRadioName}']`)
          .forEach(radio => {
            const panelId = `#${radio.getAttribute('id')}_panel`
            const panel = this.element.querySelector(panelId)

            if (currentPanelId === panelId) {
              panel.style.display = ''
            } else {
              panel.style.display = 'none'
            }
          })
      })
    })

    setInterval(() => {
      if (this.autoplayControl.getAttribute('aria-pressed') === 'true') {
        this.element
          .querySelector('[data-carousel-direction=next]')
          .dispatchEvent(clickEvent)
      }
    }, 3000)

    this.autoplayControl.addEventListener('click', event => {
      const toggle = event.target
      const autoplayState =
        toggle.getAttribute('aria-pressed') !== 'true' ? 'true' : 'false'

      toggle.setAttribute('aria-pressed', autoplayState)
    })
  }

  pushAlertMessage(text) {
    const alert = document.createElement('div')

    alert.setAttribute('role', 'alert')
    alert.append(text)
    this.alertsContainer.append(alert)
    clearTimeout(this.alertsTimeoutId)
    this.alertsTimeoutId = setTimeout(() => {
      this.alertsContainer.replaceChildren()
    }, 2000)
  }
}

const carousels = []

document
  .querySelectorAll('[data-adg-carousel]')
  .forEach(element => carousels.push(new AdgCarousel(element)))

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:

Previous/next controls are implemented as buttons and simply change the currently active radio button.
- The currently active panel is announced using role="alert", see Noticing screen readers using alert role.
Autoplay functionality is implemented using a simple timer that clicks the "Next" button every 2 seconds, as long as the "Autoplay" button has aria-pressed="true", see Marking elements activatable using aria-pressed.
- The autoplay functionality can be toggled: it simply changes the value of aria-pressed="true".
- It is important that the autoplay button is before the radio buttons in the DOM, so screen reader users can disable it before interacting with them.
Using .carousel:focus-within .control label, a style can be applied to all radio button labels upon interacting with the carousel.
- 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 carousel items).
- It also separates those controls clearly from other controls like Autoplay, and previous/next, which are accessed using Tab key.
By giving the "Autoplay" a dedicated style (bold) upon [aria-pressed="true"], its status is also perceivable to visual users.

You are here:

Carousels (or: slideshow, slider)

General requirements

Proof of concept

Implementation details

Previous/next navigation