Loading...
Auto-play controls, keyboard navigation, and motion preferences
Carousels (or sliders) show multiple pieces of content in a rotating sequence. The key ARIA roles are region, group for slides, and live regions for announcements.
Wrap the carousel in a region with aria-roledescription="carousel" to identify it as a carousel widget.
Each slide should be role="group" with aria-roledescription="slide" and label like "1 of 4".
Use aria-live="polite" to announce slide changes: "Slide 2 of 4: Title".
Use the arrow buttons or dots to navigate. Try pressing Left/Right arrow keys when focused on the carousel.
Building for everyone
<div role="region"
aria-roledescription="carousel"
aria-label="Featured content">
<!-- Live region for announcements -->
<div role="status" aria-live="polite" className="sr-only">
Slide 2 of 4: Keyboard Navigation
</div>
<!-- Slides container -->
<div>
<div role="group"
aria-roledescription="slide"
aria-label="1 of 4"
aria-hidden="false">
<!-- Visible slide content -->
</div>
<div role="group"
aria-roledescription="slide"
aria-label="2 of 4"
aria-hidden="true">
<!-- Hidden slide content -->
</div>
</div>
</div>aria-hidden="true" on slides that are not currently visible. This prevents screen readers from reading all slides at once.