[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 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:

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

Clematis

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:

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

Clematis

Fruit bushes

Vegetables

Code snippet

Using a list where don't contain much content: