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