Web accessibility tutorials Guidance on how to create websites that meet WCAG
Jump to the navigation

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

The following heading might be used at the start of a carousel highlighting specific web 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:

Code snippet: 
<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:

Example

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).

Slide structure using headings:

Code snippet: 
<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:

Example
  • Clematis
  • Fruit bushes
  • Vegetables

Code snippet

Using a list where don’t contain much content:

Code snippet: 
<h3>Featured products</h3>
<ul>
	<li><img src="slide1img.png" alt=""> Slide 1 name</li>
	<li><img src="slide2img.png" alt=""> Slide 2 name</li>
	<li><img src="slide3img.png" alt=""> Slide 3 name</li>
</ul>