Carousel missing roles, names and attributes

[CrystalZenyth]

For a carousel with a single slide:

To ensure accessibility of the carousel, follow these steps:

1. Place the slider within a container element with the role="region" and the attribute aria-roledescription="carousel". Include either an aria-labelledby attribute that references the ID of the heading element labeling the carousel, or use an aria-label attribute to provide a descriptive label for the carousel.
2. Wrap each individual slide within a list item element with the attribute role="group" and aria-roledescription="slide" to indicate the role of each slide.
3. Additionally, set the aria-label attribute to display the slide number in the format "# of #", indicating the current slide number and the total number of slides.
4. Structure the slider dots inside of the region list markup and add aria-controls to each button referencing and ID on the slide they control.

For a carousel with a multiple slides:

To ensure accessibility of the carousel, follow these steps:

1. Wrap the slider within an element that has the attribute aria-roledescription="carousel". Additionally, include either an aria-labelledby attribute that references the ID of the heading element used to label the carousel or an aria-label attribute that provides a descriptive label for the carousel.
2. Within the carousel element, include a child element with the attribute role="list" to indicate the list structure of the carousel.
3. Wrap each individual slide within an list item element and make sure they have the necessary attributes. Set the aria-label attribute to display the slide number in the format "# of #", indicating the current slide number and the total number of slides. Additionally, use the attribute aria-roledescription="slide" to describe the role of each slide.
4. Structure the slider dots inside of the region list markup and add aria-controls to each button referencing and ID on the slide they control.

To discuss further: [email protected] - Crystal Scott, CPWA