Structure
Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.
- 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:
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
Code snippet
Using a list where don’t contain much content: