Creating Accessible Carousels

When creating a carousel in the Studio, 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 Studio 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. In the Design panel, 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 group. Only leave the visibility of Slide 1 toggled on, and turn off the visibility for the remaining slides by clicking the eyeball icon next to each layer. Hidden assets will appear with a closed-eye icon next to them in the Layers panel.

4. Next, add forward and backward arrows (from the Icons section of the Media 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 On Click > Cycle Next > Carousel Slides (the carousel group we created earlier) interaction.

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

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

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 Auto-Carousel group of On View > Cycle Next > Auto-Carousel

  4. Ensure that the group does not have an HTML section tag or Aria-Label.