Hero Image Carousel

A hero carousel is a horizontal slideshow of images or video and has controls that allow users to advance through each slide both forward and backward. Hero carousels visually enhance pages and set the tone for websites or key landing pages by offering multiple images, video, and text paired with call-to-action buttons, increasing user engagement. Hero carousels span the full width of a page and can be positioned at the top, center, or bottom of the page.

Definition

A hero carousel is a horizontal slideshow of images or video and has controls that allow users to advance through each slide both forward and backward. Hero carousels visually enhance pages and set the tone for websites or key landing pages by offering multiple images, video, and text paired with call-to-action buttons, increasing user engagement. Hero carousels span the full width of a page and can be positioned at the top, center, or bottom of the page.

Usuage and Specifications

Incorporate these best practices when working with carousels:

  • Engage visitors with high-resolution images, not to exceed 72 ppi, minimum width of 1,920 pixels to accommodate large monitors
  • Use a maximum of 5 slides
  • If using autoplay, allow 5 seconds per slide
  • User controls should always be available and legible
  • Maintain consistent aspect ratio
  • Provide alt text to support web accessibility
  • Every page does not need a hero
  • Buttons should follow alignment of body copy: centered or left- or right-aligned

Size

  • Maximum: 300 ppi at full page/screen width
  • Minimum: 1,920 pixels at 72 ppi for full page/screen width

Core Accessibility Principles

To meet the University accessibility standard, hero carousels must:

  • Be fully operable using a keyboard
  • Provide meaningful announcements for screen readers
  • Use sufficient color contrast and visible focus styles
  • Offer clear navigation, orientation, and labeling
  • Avoid automatic motion unless it is user-controlled
  1. Structure and Markup
    • Wrap the carousel in a <section> or <div> with role="region" and an aria-label describing its purpose.
    • Group each slide in a container with role="group" and aria-roledescription="slide".
    • Add aria-label attributes (e.g., “Slide 1 of 5, Title”) to communicate position and context.
  2. Controls
    • Provide Previous/Next buttons with descriptive labels
    • Ensure buttons are focusable and have visible focus outlines.
    • Include a Pause/Play button for any auto-advancing carousel.
    • Avoid tiny hit areas; use minimum 24 x 24 pixels clickable targets (icons, etc.) but total clickable area should be no less than 44 x 44 pixels.
  3. Keyboard Interaction
    • Users must be able to move between slides using Tab and Enter/Space.
    • Optionally, support arrow keys (left/right) for slide navigation.
    • Keep focus movement predictable — do not trap users inside the carousel.
  4. Screen Reader Support
    • Each slide should have a unique heading or label.
    • Hide inactive slides from screen readers using aria-hidden="true".
  5. Motion and Timing
    • Avoid auto‑rotation by default. If necessary, provide Pause/Play button.
    • Avoid animations that flash more than 3 times per second to prevent seizure risks.
  6. Visual Design
    • Provide strong color contrast (At least 4.5:1) between text and background.
    • Ensure consistent visible focus indicators (e.g., a 2-pixel outline in a high-contrast color).
    • Use responsive layouts; carousels must work on desktop and mobile.
    • Be sure to use a different symbol or icon to represent each function, e.g., chevrons for advancing slides, carats for play, parallel lines for pause, etc.
    • Provide content managers the ability to choose from a select set of background colors for overlays, e.g., black and white, or gray and blue

When to Use

  • Setting the tone or mission for a site or key landing page
  • Giving prominence to dynamic or featured content
  • Encouraging exploration and click-throughs to pages with detailed information

When Not to Use

  • When there is competing information of equal importance
  • Not for long-form content; videos should be no more than 10 seconds
  • Ensure there is enough content beneath the hero carousel to support a full page
  • Do not use a hero carousel to fill up space on a page

Examples

The default color of the overlay is white but can be black. Alignment can be left, center, or right and must be set for each slide. Multiple slides autoplay with indicators and user controls and swipe on mobile.

  • Overlay Color: white (default) or black
  • Alignment: Set on each slide: hero-carousel__slide--align-left (default) hero-carousel__slide--align-center, hero-carousel__slide--align-right
  • Autoplay: Add class autoplay and set data-autoplay="6000" (ms)