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 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.
See the Banners page for more information about banner creation.
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").
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.
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.
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):
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)
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
2.2.2 Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true:
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.
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.
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.
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):
2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)