Carousel

Release candidate

Carousel groups small amounts of content into discrete slides, that are viewed in a linear sequence.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
  • Avoid using infographics, maps, charts as images or images of text.
  • Order slides by importance, with the most critical info first.
KeyFunction
Tab
  • If focus is outside carousel, moves focus into the Carousel, setting focus on the previous button.
  • If focus is on the previous button, moves focus to the next button.
  • If focus is on the next button moves focus to the first visible carousel slide.
Enter
  • if focus is on next button, it moves to the next slide and keeps focus on the button.
  • if focus is on previous button, it moves to the previous slide and keeps focus on the button.
Shift + Tab
  • If focus is on the next button, moves focus to the previous button.
  • If focus is on the first visible slide, moves focus to the next button in controls.
  • If focus is on the element after the carousel, sets focus on the last interactive element on the last visible slide or the last visible slide if it doesn't contain any interactive elements.
Right arrow
  • If focus is in a slide and there are more slides to the right, moves the focus to the next slide.
Left arrow
  • If focus is in a slide and there are more slides to the left, moves the focus to the previous slide.
  • VoiceOver/Safari on Mac bug: When shift+tab from the CTA (link or button), there's an empty focus stop. (This is not a Salt bug)
    • Focus moves to the slide, but VoiceOver doesn't announce the slide's content.
      • Single slide: Pressing shit+tab again will move focus to the (next) control button
      • Multiple slides: Pressing shit+tab again will move focus to the last focusable element in the previous slide or the previous slide if the previous slide doesn't contain any interactive elements.
    • Now pressing tab will place focus on the slide and will announce the slide's content.