Carousel
A carousel cycles through a sequence of content panels within a single compact section, usually displaying one or few at a time. Users navigate between slides using previous and next buttons or tabs.
Carousels can be used when one area of the page must showcase several related but independent items, such as presentation slides, images or cards. They are less suitable for primary content, since slides that are not currently visible are easily overlooked.
Accessibility Features
- A carousel can be navigated using previous/next slide buttons or tabs. If tabs are used, appropriate attributes and keyboard interaction patterns are required (See the Tabs page for details).
- Carousel controls must have descriptive labels or accessible names. They must communicate that they are used to navigate between slides.
- Carousel controls must be placed before the slides in DOM order.
- Feedback must be provided when the slide changes, for example by adding
aria-liveto the element that contains the slides. When the carousel rotates automatically,aria-livemust be set tooff. - If the carousel rotates automatically, a play/pause button must be available to stop the motion. Feedback from the action must be provided to screen readers, for example, by updating the
aria-labelof the button. - Inactive slides must be removed from the accessibility tree and the focus order, for example using
inert. - A
<section>landmark witharia-roledescription="carousel"and a descriptivearia-labelidentifies the carousel's purpose. aria-roledescription="slide"identifies a single slide to screen readers.