Carousels

A carousel enables a user to cycle through a queue of related images, cards or other items. The experience is generally more consumable and engaging, and less intimidating, because only one item from the set is in view at a time.

Banner Carousels

Banner carousels are used for displaying a collection of banners or images one at a time through either auto-rotation or user interaction. The order of items should be based on priority, with the most important item in position one or two.

  • Maximum 3 total images in the carousel.
  • Previous/Next arrows are optional.
  • Auto-rotation behavior is optional. Auto-rotation is suspended, until the page is reloaded, when the user interacts with any carousel control.
  • A row of either buttons or carousel indicators, beneath the image area, is recommended to assist the user with understanding how much content is in the collection while also providing a means to cycle the content.
  • Image heights, from one carousel slide to the next, should be consistent to avoid undesired "position jumping" during a slide transition.

See the Banners page for more information about banner creation.

Filmstrip Carousels

Used for a collection of content with varying dimensions, such as multiple product stacks or cards.

Several items are shown at once on larger breakpoints.

UX best practices still recommend a maximum of 8 items in the collection because users generally don't consider options sets larger than this.

If there are more than 8 items in the carousel, display text above the carousel (right-aligned) that indicates the visible set in relation to the total number in the collection (e.g. "Viewing 5-8 of 12").

Touchscreen Interaction

Swipe to the left across the carousel content in order to cycle to the next item/set, and swipe to the right to cycle to the previous item/set.

Do's and Don'ts

Types

Variants

Common Button Labels and Usage

Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.

Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.

Button Label:
Corresponding Action:
Add to Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign In/Sign Out
View Details
Ok/Cancel
Learn More
Close
Takes users to Cart page, with item added
Used for search buttons
Takes users back to entry point for a task
Used to save an item
Navigates users to change an item
Deletes an item on the page, usually with a verification step
Used as progression
Used as forward and backward navigation (Next is primary, Previous is secondary)
Used to submit a task or info
Used for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used instead of “Select” in cases of product details or within learn content
For use in modal verification steps when more specific CTAs will not fit due to space
Used to link users to more learning content or contextual help
Used within modal windows

Banner Carousels

Banner Carousel with Auto-Rotate

<div id="banner-carousel-no-arrows" class="dds__carousel slide" data-ride="dds__carousel" data-interval="5000" data-pause="hover"> <div class="dds__carousel-inner"> <div class="dds__carousel-item dds__active"> <a href="javascript:;"><img class="dds__img-fluid" alt="First slide" src="http://placehold.it/2160x480?text=First+Slide"></a> </div> <div class="dds__carousel-item"> <a href="javascript:;"><img class="dds__img-fluid" alt="Second slide" src="http://placehold.it/2160x480?text=Second+Slide"></a> </div> <div class="dds__carousel-item"> <a href="javascript:;"><img class="dds__img-fluid" alt="Third slide" src="http://placehold.it/2160x480?text=Third+Slide"></a> </div> <div class="dds__carousel-item"> <a href="javascript:;"><img class="dds__img-fluid" alt="Third slide" src="http://placehold.it/2160x480?text=Fourth+Slide"></a> </div> </div> <ol class="dds__carousel-indicators"> <li data-target="#banner-carousel-no-arrows" data-slide-to="0" class="dds__active"></li> <li data-target="#banner-carousel-no-arrows" data-slide-to="1" class=""></li> <li data-target="#banner-carousel-no-arrows" data-slide-to="2" class=""></li> <li data-target="#banner-carousel-no-arrows" data-slide-to="3" class=""></li> </ol>
</div>

Banner Carousel with Buttons

<div id="banner-carousel-with-buttons" class="dds__carousel slide" data-ride="dds__carousel" data-interval="5000" data-pause="hover"> <div class="dds__carousel-inner"> <div class="dds__carousel-item dds__active"> <a href="javascript:;"><img class="dds__img-fluid" alt="First slide" src="http://placehold.it/2160x480?text=First+Slide"></a> </div> <div class="dds__carousel-item"> <a href="javascript:;"><img class="dds__img-fluid" alt="Second slide" src="http://placehold.it/2160x480?text=Second+Slide"></a> </div> <div class="dds__carousel-item"> <a href="javascript:;"><img class="dds__img-fluid" alt="Third slide" src="http://placehold.it/2160x480?text=Third+Slide"></a> </div> <div class="dds__carousel-item"> <a href="javascript:;"><img class="dds__img-fluid" alt="Third slide" src="http://placehold.it/2160x480?text=Fourth+Slide"></a> </div> </div> <ol class="dds__carousel-indicators-btn dds__d-flex"> <li class="dds__flex-column dds__active"> <div class="dds__carousel-arrow-up"></div> <button class="dds__carousel-btn dds__d-none dds__d-lg-inline" data-slide-to="0">This is a button for the First Slide.</button> <button class="dds__carousel-btn dds__d-lg-none" data-slide-to="0">1</button> </li> <li class="dds__flex-column"> <div class="dds__carousel-arrow-up"></div> <button class="dds__carousel-btn dds__d-none dds__d-lg-inline" data-slide-to="1">This is a button for the Two Slide.</button> <button class="dds__carousel-btn dds__d-lg-none" data-slide-to="1">2</button> </li> <li class="dds__flex-column"> <div class="dds__carousel-arrow-up"></div> <button class="dds__carousel-btn dds__d-none dds__d-lg-inline" data-slide-to="2">This is a button for the Third Slide.</button> <button class="dds__carousel-btn dds__d-lg-none" data-slide-to="2">3</button> </li> <li class="dds__flex-column"> <div class="dds__carousel-arrow-up"></div> <button class="dds__carousel-btn dds__d-none dds__d-lg-inline" data-slide-to="3">This is a button for the Fourth Slide.</button> <button class="dds__carousel-btn dds__d-lg-none" data-slide-to="3">4</button> </li> </ol>
</div>

No items found.

Carousel - Filmstrip with Supporting Content

<div class="dds__filmstrip-carousel"> <div class="dds__glide" data-toggle="dds__filmstrip-carousel"> <div data-glide-el="track" class="dds__glide__track"> <ul class="dds__glide__slides"> <button class="dds__filmstrip-container dds__active" aria-pressed="true" data-filter="dds__filter" data-filter-value="Title 1"> <img class="dds__container-image" src="http://placehold.it/285x380" alt="Game Title 1" /> <span class="dds__container-title dds__btn-link">Title <br />dsfasdfasdf1</span> </button> <button class="dds__filmstrip-container " aria-pressed="false" data-filter="dds__filter" data-filter-value="Title 2"> <img class="dds__container-image" src="http://placehold.it/285x380" alt="Game Title 2" /> <span class="dds__container-title dds__btn-link">Title <br />dsfasdfasdf2</span> </button> <button class="dds__filmstrip-container " aria-pressed="false" data-filter="dds__filter" data-filter-value="Title 3"> <img class="dds__container-image" src="http://placehold.it/285x380" alt="Game Title 3" /> <span class="dds__container-title dds__btn-link">Title <br />dsfasdfasdf3</span> </button> <button class="dds__filmstrip-container " aria-pressed="false" data-filter="dds__filter" data-filter-value="Title 4"> <img class="dds__container-image" src="http://placehold.it/285x380" alt="Game Title 4" /> <span class="dds__container-title dds__btn-link">Title <br />dsfasdfasdf4</span> </button> <button class="dds__filmstrip-container " aria-pressed="false" data-filter="dds__filter" data-filter-value="Title 5"> <img class="dds__container-image" src="http://placehold.it/285x380" alt="Game Title 5" /> <span class="dds__container-title dds__btn-link">Title <br />dsfasdfasdf5</span> </button> <button class="dds__filmstrip-container " aria-pressed="false" data-filter="dds__filter" data-filter-value="Title 6"> <img class="dds__container-image" src="http://placehold.it/285x380" alt="Game Title 6" /> <span class="dds__container-title dds__btn-link">Title <br />dsfasdfasdf6</span> </button> <button class="dds__filmstrip-container " aria-pressed="false" data-filter="dds__filter" data-filter-value="Title 7"> <img class="dds__container-image" src="http://placehold.it/285x380" alt="Game Title 7" /> <span class="dds__container-title dds__btn-link">Title <br />dsfasdfasdf7</span> </button> <button class="dds__filmstrip-container " aria-pressed="false" data-filter="dds__filter" data-filter-value="Title 8"> <img class="dds__container-image" src="http://placehold.it/285x380" alt="Game Title 8" /> <span class="dds__container-title dds__btn-link">Title <br />dsfasdfasdf8</span> </button> <button class="dds__filmstrip-container " aria-pressed="false" data-filter="dds__filter" data-filter-value="Title 9"> <img class="dds__container-image" src="http://placehold.it/285x380" alt="Game Title 9" /> <span class="dds__container-title dds__btn-link">Title <br />dsfasdfasdf9</span> </button> <button class="dds__filmstrip-container " aria-pressed="false" data-filter="dds__filter" data-filter-value="Title 10"> <img class="dds__container-image" src="http://placehold.it/285x380" alt="Game Title 10" /> <span class="dds__container-title dds__btn-link">Title <br />dsfasdfasdf10</span> </button> </ul> </div> <div class="dds__glide__arrows" data-glide-el="controls"> <button class="dds__icons dds__chevron-left" data-glide-dir="<" style="display: none"></button> <button class="dds__icons dds__chevron-right" data-glide-dir=">"></button> </div> </div> </div>

No items found.

Carousel content most often consists of banners, cards and product stacks.

What Makes a Carousel Accessible?

  • Users must be able to pause carousel movement because it can be too fast or distracting, making text hard to read.
  • All functionality, including navigating between carousel items, must be operable by keyboard.
  • Changes to carousel items must be communicated to all users, including screen reader users.
  • The keyboard position (“focus”) is managed in a reasonable and comprehensible fashion.

References

1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)

2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true (Level A):

  • Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
  • Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Carousel Structure

Structural markup ensures that the content of a carousel can be used in a variety of situations. For example, a carousel with proper markup could be presented as a list of articles on a mobile device.

General Structure

As a collection of content items, carousels are typically best represented as unordered lists, using <ul> and <li>. Depending on the context, other elements can also be used.

Every carousel should be enclosed in a labeled region, to allow users to find the carousel easily. For example, a <div> element can be used to define the region and id can define the heading that contains the label.

Items within a Carousel

Carousels are often used as a gallery to display a series of images. However, more complex content, such as cards or product stacks, can also be shown inside carousels. In all cases, use appropriate markup to ensure that the structure and meaning of the content are conveyed clearly. Such markup may include headings, sections, lists, articles, and other elements as needed.

Carousel Functionality

Navigation Buttons

Provide buttons that enable users to switch between carousel items. For example, previous/next arrow buttons or a row of navigation indicators.

Use <button> elements to provide semantic meaning, support for assistive technologies, and consistent keyboard behavior.

Create and add the buttons using JavaScript, as they only work when JavaScript is available anyway.

A row of navigation indicators includes a distinct button for each item in the carousel, with the button for the current item highlighted. These enable users to get an overview of the carousel content and where they are in the sequence, and also enables them to navigate directly to any item.

Make sure that the highlighted navigation indicator is also identified by text that is visually hidden (for screen readers).

Announce the Current Item

Use a WAI-ARIA live region to inform screen reader users what item is currently shown. For example, a visually hidden “polite” live region can be used and added to the carousel when the carousel is loaded. Then, when clicking the previous/next buttons or navigation indicators, the text “Item x of y” (with x for current item number and y for the number of items) is set to this live region. Capable screen readers will announce this text.

Allow the user to maintain control of the keyboard focus. When the carousel advances automatically, users should not be drawn away from their current place in the page.

Do not move keyboard focus after the previous/next buttons or navigation indicators have been used; moving the focus makes it harder for users to browse back and forth between the slides.

Focus On the Selected Carousel Item

When users select any navigation button for the carousel, the focus should be set on the selected item. In this case, the focus needs to be set to the <li> element that has the class current set, after the change or transition. This makes interaction easier for keyboard and assistive technology users.

By default, <li> elements cannot receive focus. By setting its tabindex attribute to -1, the element is enabled to receive focus through JavaScript.

Carousel Animations

Provide users with control over animations in the carousel. Pausing animation is essential for people who find movement distracting or who need more time to read.

Play/Stop Capability

Provide a button to allow users to stop and resume animation.

The button label and its function changes, depending on whether the animation is currently running or not.

The JavaScript only replaces the value of the <button> element and its attributes. Replacing the entire button would result in loss of keyboard focus.

Pause on Mouse-Over and Keyboard Focus

Pause the carousel animation when the mouse pointer is hovering over the carousel or when it receives keyboard focus. Pausing on mouse hover is useful for people who need more time to read the content and makes it easier to click links in the carousel. Keyboard users do not lose their position when the carousel is paused.

focusin and focusout events are defined in the W3C Document Object Model (DOM) Level 3 Events Specification (Working Draft) and implemented in many browsers. Firefox may need a short polyfill.

Hide Transitions from Assistive Technologies

During transitions, the current and next items are simultaneously visible. This can be confusing to assistive technologies such as screen readers. To resolve this, create an in-transition class that makes the item visible. An attribute can then be set to true to hide the item from assistive technologies. When the transition completes, the attribute can then be removed.

References

2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true:

  • Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
  • Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

Carousel Styling

Button Size

Use appropriately sized buttons and links, and provide whitespace around them, to allow people with reduced dexterity to use the carousel more easily. This also benefits people using touch screens, such as on mobile devices.

WCAG 2.0 does not have specific recommendations for button and link sizes, and surrounding white space. Refer to the suggested improvements for target size. At a minimum, touch areas of less than 45 × 45 px should be avoided.

Contrast

Ensure sufficient contrast between the foreground and the background of text, links and buttons. This can be a challenge when text or buttons are positioned on top of images. In that case, a (semi-) opaque background color can help to maintain the contrast regardless of the image used.

Indicate Button Status

Since the navigation buttons added to the carousel are typically small, it is important to indicate their status both in color and shape (in addition to proper naming and labeling). This makes it easier for people to differentiate the buttons and their current status.

References

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following (Level AA):

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)