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.
As a collection of content items, carousels are typically best represented as unordered lists, using
<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.
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:
This example of an article that includes a heading and a paragraph shows how more complex content can be used.
Related WCAG resources
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:
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)