﻿ [DRAFT] Structure - Carousel - Tutorials

W3C home Web Accessibility Initiative (WAI) home


[DRAFT] Structure

  • What to do: provide structural markup to identify the carousel on the page and each individual slide;
  • Why: to enable screen reader users to understand the relationship between the carousel and other page content and distinguish between slides;
  • How: position a heading at the start of the carousel and if slides contain text, a lower level heading at the start of each slide: if there is little or no text, then use list markup to distinguish between slides;
  • Conformance: required to meet SC 1.3.1: Info and Relationships and SC 2.4.6 Headings and Labels.

Overall description of examples

Head up the carousel

The following heading might be used at the start of a carousel highlighting specific web pages:

Featured pages

Screenshot of carousel [screenshot of carousel needed here]

The content that follows the carousel should then have a heading at the same level or higher:

Upcoming events (example)

(List of events)

Code snippet

Showing both the carousel heading and the one following the carousel:

<h3>Featured pages</h3>
<div id="carousel">... carousel slides and controls ...</div>
<h3>Upcoming events</h3>

Headings for slides

If slides contain enough text to require structure, each slide could begin with a heading at one level below the overall carousel heading:

Featured products


Scented or unperfumed, evergreen or deciduous, we have clematis for all aspects in your garden (slide 1 content)

Fruit bushes

Year after year, these shrubs will fill your garden with succulent fruit, choose from apricot, blueberry and raspberry (slide 2 content).

Code snippet

Slide structure using headings:

<h3>Featured products</h3>
<h4>Slide 1 heading</h4>

<p>Slide 1 description</p>
<h4>Slide 2 heading</h4>
<p>Slide 2 description</p>

List of slides

If slides contain just images, or images plus just a word or two of text, they can be presented in a list:

Featured products


Fruit bushes


Code snippet

Using a list where don't contain much content:

<h3>Featured products</h3>

<li><img src="slide1img.png" alt=""><br>Slide 1 name</li>
<li><img src="slide2img.png" alt=""><br>Slide 2 name</li>
<li><img src="slide3img.png" alt=""><br>Slide 3 name</li>