Data Display
Carousel
Carousel is a horizontally scrollable layout that displays a series of items. It shows a collection of carousel items that can be scrolled on and off the screen.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features4 checks
- Uses role="region" with aria-roledescription="carousel"
- Each slide has role="group" with aria-roledescription="slide"
- Auto-play pauses on hover and focus for user control
- Current slide position announced via aria-label
When to use this component
✓Do's
- •Showcasing multiple banners or announcements in limited space
- •Displaying a gallery of images or cards
- •Presenting testimonials or featured content sequentially
✗Don'ts
- •Critical content that all users must see, most users only see the first slide
- •Navigation or primary actions, use a proper nav component
- •Content that requires comparison, use a grid layout instead
Do's and Don'ts
✓ Do's
Use carousels for featured content, onboarding steps, or image galleries where progressive disclosure is appropriate.
Always show pagination indicators so users know how many slides exist and their current position.
✗ Don'ts
Don't use carousels for critical information, users may not see all slides and could miss important content.
Don't auto-play without user control, it can cause accessibility issues and violates WCAG 2.2.2.