Skip to main content
Hennepin County Design System

Carousels

Under review

We are in the process of reviewing this component, content, or guidance to make improvements

Carousels can help save space on a page. They can also feature certain content. But many carousels have major usability and accessibility issues.

It’s best to avoid carousels. They require extra development resources to build and maintain. This can cause technical debt. Users have also learned to ignore carousels as unhelpful promotional content.

Better options exist for displaying content that’s engaging and has visual appeal:

Import

Label

When to use

Before choosing a carousel, ask about the goals and outcomes. Think through the content’s purpose and the engagement users will have with the content.

If you must use a carousel, you can reduce problems for users:

Structure

  • Save carousel space for priority content. Make sure the first slides are the most important.
  • Keep the number of slides to no more than 4.
  • Hide the carousel from screen reader users if the content is only decorative.
  • If a carousel has links, let users click anywhere on each slide to get to the link destination. Don’t create separate links for different parts of the slide.

Content

  • Use alt text for images that offer informative content. For decorative images, use blank alt attribute to hide them from screen readers. For more information on photos and images, visit Photos and images.
  • Include alt text for images that have text or text overlays.
  • If using a heading on a slide, follow the heading hierarchy of the page.
  • Use clear and concise text for the slide heading.

Controls

  • Let users advance the slides themselves. Don’t auto-advance the slides.
  • Write clear labels for control buttons, like "Back" and "Next". For buttons with an icon, hide the icons from screen readers by using blank alt attribute.
  • Controls need to be at the beginning of focus order regardless of their relation to the carousel.
  • For mobile, group the buttons under the carousel.
  • Ensure correct contrast, size, and spacing of buttons. Clearly show button status.
  • Use aria-live to announce when slides advance.
  • Make controls visible and usable at 400% for screen magnifiers.

When not to use

  • Avoid carousels if more effective ways to present content exist.
  • Avoid carousels to make the page appear more interactive. Users often don’t engage with carousels.
Open all

For more guidance on how to develop accessible carousels, visit BBC carousels or visit W3C carousels tutorial.

  • Use high-quality images.
  • Use captions relevant to each slide.

Open all