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.
A working demo example for this code is available.
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.Back to Top