Carousel
Carousel is a component that displays multiple elements like a slideshow.
The Carousel follows the WAI-ARIA - Carousel (Slide Show or Image Rotator) Pattern for accessibility.
Keyboard Navigation
| key | Description | State |
|---|---|---|
Tab | When focus moves to the carousel, it focuses the active item. | - |
ArrowLeft | Focuses and activates the previous item. If it is the first item, focuses the last item. | orientation="horizontal" |
ArrowRight | Focuses and activates the next item. If it is the last item, focuses the first item. | orientation="horizontal" |
ArrowUp | Focuses and activates the previous item. If it is the first item, focuses the last item. | orientation="vertical" |
ArrowDown | Focuses and activates the next item. If it is the last item, focuses the first item. | orientation="vertical" |
Home | Focuses and activates the first item. | - |
End | Focuses and activates the last item. | - |
ARIA Roles and Attributes
| Component | Role and Attributes | Usage |
|---|---|---|
Carousel | aria-roledescription="carousel" | Indicates that it is a carousel. |
CarouselSlides Internal | id | id to be used to associate with CarouselControlNext and CarouselControlPrev. |
aria-live | Set “off” if autoplay is true or “polite” if false. | |
CarouselControlNext | aria-controls | Set the id of the associated CarouselSlides. |
aria-label="Go to next slide" | Set Go to next slide. | |
CarouselControlPrev | aria-controls | Set the id of the associated CarouselSlides. |
aria-label="Go to previous slide" | Set Go to previous slide. | |
CarouselIndicators | role="tablist" | Indicates that this is a tab list. |
aria-label="Sliders" | Set Sliders. | |
aria-orientation | Set “horizontal” or “vertical” based on orientation value. | |
CarouselIndicator Internal | role="tab" | Indicates that this is a tab. |
aria-controls | Set the id of the associated CarouselSlide. | |
aria-label | Set the destination slide number, such as Go to 1 slide. | |
aria-selected | Set true if the associated slide is selected, false if not. | |
CarouselSlide | role="tabpanel" | Indicates that this is a tab panel. |
id | The id to use to associate with the CarouselIndicator. | |
aria-label | Set to the number of the current slide, such as 1 of 4. | |
aria-roledescription="slide" | Indicates that this is a slide. |
Edit this page on GitHub