Slideshows and Carousels

Western's Ashlar theme is intended to help users create engaging and inclusive content while maintaining their site's accessibility and overall performance. Because of this, image slideshows, also known as a carousels, are not supported on Drupal 8 campus sites.

Slideshows are still supported in WordPress and Drupal 7. However, authors should consider presenting information in an alternate format before choosing a slideshow option.

Ashlar does not include a slideshow component for the following reasons:

Slideshows are not always accessible

Authors can control one level of accessibility by adding alt text to the images. But most out-of-the-box slideshow plugins are not accessible to our diverse range of visitors.

For example, many players do not have the necessary keyboard functionality needed for someone that doesn't use a mouse to navigate. Some do not have the semantics to tell users which buttons are the previous and next buttons, or the Play/Pause button.

slideshow controls containing three empty links, screenshot
Because there's no meaningful text in the links (the <a> tags), someone using assistive technology would not know what the links are and what they do.

Slideshows come with a lot of data

Slideshows typically contain 7-10 photos, but some slideshows on Western sites contain 20 or more photos.

Images use up a lot of data in loading. This is especially burdensome for visitors relying on cellular data.

Users only interact with the first image

Serving up 7+ images in a slideshow would be one thing if visitors went through the entire slideshow each time. However, a web developer for Notre Dame, Eric Runyon, researched their slideshow component in 2013 to see which images users were clicking.

Runyon found that 89.1% of users clicked on the first image. Only 3.1% clicked on the second image, and less on subsequent images.

This means that for a vast majority of users, images are being loaded that are never being seen.
 

Accessible slideshows need a lot of code

Slideshows require a number of user interactions. The user needs to know:

  • what is in the image,
  • which slide in the sequence the image is
  • how to go to the next or previous slide,
  • how to pause the slideshow, and
  • what type of widget is controlling the slideshow (i.e. are they interacting with a tabpanel, a list, a carousel, etc.?)

It requires a lot of HTML, JavaScript, and Accessible Rich Internet Applications (ARIA) to convey the experience to assistive technology.

This can become a performance issue. The HTML/JS/ARIA requires maintenance and improvement over time. This is a strain on resources for a component that does not have a significant return on investment.

Examples of "Accessible" Slideshows

These are slideshow patterns that were designed for accessibility:

These have been deemed accessible through agencies and working groups focused on accessibility. However, these examples have not been vetted by end users at Western, and cannot be guaranteed to be accessible with our systems. There is also no guarantee they will continue to be considered accessible.

Alternatives to Carousels/Slideshows

Page Layout

If the reason for wanting a slideshow is to highlight a series of photos, an alternative to a carousel could be testing different layout options to create a gallery-like page.

If you are in a Drupal 8 site, you can use Layout Builder to drop images in a 2-column, 3-column, or 4-column format. This would allow images to appear in a row and save space, while reducing potential barriers to that content.

Column templates are also available in WordPress through the Genesis Columns plugin. Contact Web Help if you would like assistance setting up Genesis Columns on a WordPress site.

Image grids are also available in the Lite template.

Cards

If you have a Drupal 8 site and would like slideshows to highlight upcoming events or link to other content, cards are the way to go. Cards fit very well with content like recent events, stories, or news. They are available as a block type, or can be set up to dynamically display content with views.

gray placeholder

Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

gray placeholder

A description of the event

June 1, 2018
Location Name
5:30 - 6:00pm
gray placeholder

Card body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

You can find an examples of a card layout right on the Western homepage, under "Spotlight," "Featured," and "In the News."