Notes on Implementation

We implement Bootstrap’s Carousel component, with some tweaks to the visual appearance and functionality to make it accessible (following the ARIA authoring practices for a basic carousel). We do not recommend following the Bootstrap documention, but rather following our code below for the type of carousel you would want to implement.

Accessibility Notes

The default Bootstrap carousel will rotate automatically on page load. Since the default Bootstrap carousel does not have a pause, stop, or hide button, this violates WCAG success criterion 2.2.2: Pause, Stop, Hide. All of the carousels below have a default interval setting of false to prevent automatic cycling of the carousel images/slides.

Copy the code below exactly (for the type of carousel you want) and then replace the following attributes with your own that make sense for each image/slide. Also, add as many or as little images as needed.

The aria-label attribute on the section element is a way to label your carousel. A screen reader user will hear the label and then the role of “carousel”. Without the label, the role is not read.

Each slide container has the attribute role = "group" with the property aria-roledescription set to “slide”.

Each slide needs an accessible name. If a slide has a visible label, its accessible label is provided by the property aria-labelledby on the slide container set to the ID of the element containing the visible label. Otherwise, an accessible label is provided by the property aria-label set on the slide container.

Each image/slide will need to be included via the img’s src attribute. Also, include an alt attribute that describes the information you want to relay to the user for each image.

The slide number or position out of the total number of slides is helpful to include for all users. This lets users know how many slides they have to cycle through.

Include more information if needed. Links can be included only on the carousel with captions below the slides.

Example of No Visible Captions