UX design notes

Think carefully before you use a carousel or slideshow wizard.

Carousels are often a poor design choice

  • As a general rule, carousels should be avoided for critical functionality unless there is a strong business case.
  • People must be highly motivated to engage with a carousel beyond the first slide.
  • A good business case might be a multi-step lead form, but this should always be A/B tested against a traditional scrolling form.

Carousels can be a development challenge

  • Logical focus order and updates for the screen reader may be complex interactions for developers.

Code examples

Use semantic HTML

This is one example of an accessible carousel wizard.

  • It is not the only way to build a carousel, but it meets all the critieria:
    • The group has a name
    • New slides titles are announced
    • Arrow keys advance the slides
<div class="carousel">
  <h2 class="h-bravo" id="carousel-title">
    NATO alphabet slideshow
  </h2>

  <div class="carousel-nav">
    <button class="previous" aria-described="carousel-title">
      <span class="hidden">Previous slide</span>
    </button>
    <button class="next" aria-described="carousel-title">
      <span class="hidden">Next slide</span>
    </button>
  </div>

  <ul class="slide-list" role="group" aria-labelledby="carousel-title">
    <li class="slide visible" tabindex="-1">
      <h3 class="h-charlie" role="status">
        Alpha
        <span class="position">1 of 3</span>
      </h3>
      <p>
        Slide content
      </p>
      <button class="next">
        Start
      </button>
    </li>

    <li class="slide inert" tabindex="-1">
      <h3 class="h-charlie" role="status">
        Bravo
        <span class="position">2 of 3</span>
      </h3>
      <p>
        Slide content
      </p>
      <button class="tertiary previous in-slide">
        Back
      </button>
      <button class="next">
        Next
      </button>
    </li>

    <li class="slide inert" tabindex="-1">
      <h3 class="h-charlie" role="status">
        Charlie
        <span class="position">3 of 3</span>
      </h3>
      <p>
        This is the best slide
      </p>
      <button class="tertiary previous in-slide">
        Back
      </button>
      <button>
        Submit
      </button>
    </li>
  </ul>
</div>