Creating Accessible Carousels

3 Minute read

Reading Time: 3 minute

When creating a carousel in Ceros, there are multiple steps you can take to ensure the information will be presented accurately to users who are leveraging screen readers to navigate your experience. In this article, we’ll walk through the steps to create a more accessible carousel in Ceros using the Cycle next/previous interactions. 

Creating an “On Click-Cycle Next” carousel:

  1. Import your assets and align your slides on your canvas. Your slides can be images, text boxes, videos, or groups of all of the above. 
  2. Apply an aria label to each slide that explains which slide it is. For example “Slide 1 of 3.”

3. In the layers panel, arrange all of your slides into a group. Name this group something like “Carousel Slides” Note: Only the assets that will be cycling should be in the folder or group. Only leave the visibility of Slide 1 toggled on, and turn off the remaining slides by clicking the eyeball icon next to each layer.

4. Next, add forward and backward arrows (from the icon library) onto your canvas to cycle the images, and place hotspots over them. On each hotspot, add an aria label, (ie. Click here to cycle to the next slide, click here to cycle to the previous slide).

5. On the forward arrow hotspot, apply an interaction of: On Click > Cycle Next > Carousel Slides Group. 

6. On the back arrow hotspot, apply an interaction of: On Click > Cycle Previous > Carousel Slides group.

7. To keep yourself organized, place each arrow and hotspot in a group in your layers panel called Controls.

8. Now, group both the “Slides” and “Controls” groups into a larger group called Carousel Group.

  • On the Carousel Group, add an HTML section tag of ‘section.’
  • Additionally, add an aria-label to the Carousel Group. We recommend making this description fairly short because the goal is to succinctly convey that this group is a carousel.

9. Add a “screen reader only” text attribute to the carousel group that explains the purpose of the carousel and how to navigate it (e.g. “This is a carousel showing XYZ. Use the next, previous or slide buttons to navigate.”)

Tip: If you are creating a carousel with a navigation below the image (think, 3 clickable dots to represent 3 image slides) be sure to use numbers instead of circle icons or any sort of shape to represent each slide. This way, the screen reader will read out the numbers and provide more information to the user about what they are clicking on.

Creating an auto-carousel (slideshow):

It’s important to keep in mind that when it comes to creating accessible content, we typically advise against building auto-advancing carousels, as they do not translate well with screen readers. We would only recommend using an auto-advancing carousel if the content within the carousel is purely decorative and for visual aesthetics—such as a header or section background.

If you do choose to include an auto-advancing carousel, there are a few things to keep in mind. 

  • Make sure you are including a Toggle Reduce Motion button on the page so that users can choose to pause the carousel. You can learn more about creating “toggle reduce motion” buttons in this article.
  • Auto-advancing carousels should not have navigation buttons.
  • Auto-advancing carousels should not have any informative content, they are purely decorative.

To create an auto-advancing carousel:

  1. Place each slide in a group, you can name this group Auto-Carousel.
  2. Only leave the visibility of Slide 1 toggled on, and toggle off the remaining slides.
  3. Apply an interaction to the group of “On View > Cycle Next > Auto Carousel Group”.
  4. Ensure that the group does not have an HTML section tag or aria label.

Was this helpful?

You already voted!
2 out of 3 people found this helpful