search

mmdevcodes / a11y-slider

Library for simple and accessible sliders
https://a11yslider.js.org/
MIT License
53 stars 8 forks source link

Carousel missing roles, names and attributes #44

Open CrystalZenyth opened 7 months ago

CrystalZenyth commented 7 months ago

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: developer.crystal.scott@gmail.com - Crystal Scott, CPWA