Carousel Structure

Structural markup ensures that the content of a carousel can be used in a variety of situations. For example, a carousel with proper markup could be presented as a list of articles on a mobile device.

General Structure

As a collection of content items, carousels are typically best represented as unordered lists, using <ul> and <li>. Depending on the context, other elements can also be used.

Every carousel should be enclosed in a labeled region, to allow users to find the carousel easily. In the following example, a <section> element is used to define the region and aria-labelledby defines the heading that contains the label.

Code snippet:
<section class="carousel" aria-labelledby="carouselheading">
  <h3 id="carouselheading" class="visuallyhidden">Recent news</h3>
    <li class="slide"></li>
    <li class="slide"></li>
    <li class="slide"></li></ul>

Carousels are often used as a gallery to display a series of images. However, more complex content, such as teasers, articles, or entire sections of web pages can also be shown inside carousels. In all cases, use appropriate markup to ensure that the structure and meaning of the content are conveyed clearly. Such markup may include headings, sections, lists, articles, and other elements as needed.

This first example shows a carousel item with images as content:

Code snippet: Example 1
<li class="slide">
  <img src="teddy1.jpg" alt="Space Teddy">

This example of an article that includes a heading and a paragraph shows how more complex content can be used.

Code snippet: Example 2
<li class="slide" style="background-image: url('teddy1.jpg');">
    <h4>Space Teddy production reaches all-time high</h4>
    <p>Teddies in Space Inc. has released outstanding numbers for the last solar year. The production of Space Teddies increased by 17%. The new version, scheduled to be released in a few months, will likely be the biggest Space Teddy release ever.</p></article>

These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:

Success Criteria: